Canvas学习与使用
作者：互联网
Canvas学习与使用
<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。
<canvas> 只有两个可选的属性 width、heigth 属性，默认 width为300、height 为 150，单位都是 px
一、绘制形状的原理
栅格的起点为左上角，坐标为 (0,0) 。所有元素的位置都相对于原点来定位；图中蓝色方形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素，坐标为 (x,y)
二、渲染上下文
<canvas> 会创建一个固定大小的画布，会公开一个或多个渲染上下文(画笔)，使用渲染上下文来绘制和处理要展示的内容
//设置一个宽500 高500的画布
<canvas id="canvas" width="500" height="500">你的浏览器不支持 canvas，请升级你的浏览器。</canvas>
// 获取画布
let canvas = document.getElementById('canvas');
// 创建上下文对象(画笔)
let ctx = canvas.getContext('2d');
三、绘制矩形
-
1、
fillRect(x, y, width, height)：绘制一个填充的矩形。 -
2、
strokeRect(x, y, width, height)：绘制一个矩形的边框。 -
3、
clearRect(x, y, widh, height)：清除指定的矩形区域，然后这块区域会变的完全透明 -
x, y：指的是矩形的左上角的坐标。(相对于canvas的坐标原点)
-
width, height：指的是绘制的矩形的宽和高。
<canvas class="canvas" width="500" height="500">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
// 获取画布元素
let canvas = document.querySelector('.canvas');
// 创建画笔
let ctx = canvas.getContext('2d');
// 默认的矩形是黑色
ctx.fillRect(0, 85, 150, 75);
// 设置填充颜色
ctx.fillStyle = "#2ecc71";
// 绘制一个矩形
ctx.fillRect(0, 0, 150, 75);
// 设置边框颜色
ctx.strokeStyle = '#3498db'
// 绘制一个矩形边框
ctx.strokeRect(160, 0, 150, 75);
// 清除指定矩形区域
ctx.clearRect(40, 30, 75, 25)
四、绘制路径
图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。
使用路径绘制图形需要的步骤：
- 创建路径起始点
- 调用绘制方法去绘制路径
- 把路径封闭
- 一旦路径形成，通过描边或填充路径区域来渲染图形
方法：
beginPath()新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径moveTo(x, y)把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。closePath()闭合路径之后，图形绘制命令又重新指向到上下文中stroke()通过线条来绘制图形轮廓fill()通过填充路径的内容区域生成实心的图形
五、绘制线段
示例1：绘制线段
<canvas class="canvas" width="500" height="500">暂不支持</canvas>
// 获取画布
let canvas =document.querySelector('.canvas');
// 创建画笔
let ctx = canvas.getContext('2d');
// 1. 新建一条路径
ctx.beginPath();
// 2. 将画笔移动到指定位置
ctx.moveTo(50,50);
// 3. 绘制一条从当前位置到指定坐标的直线
ctx.lineTo(100,50);
// 4.闭合路径。会拉一条从当前点到path起始点的直线。如果当前点与起始点重合，则什么都不做
ctx.closePath();
// 5. 绘制路径
ctx.stroke();
示例2：绘制三角形
<canvas class="canvas" width="500" height="500">暂不支持</canvas>
// 获取画布
let canvas = document.querySelector('.canvas')
// 创建画笔
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0,200)
ctx.lineTo(100,0)
ctx.lineTo(200,200)
ctx.closePath(); //闭合路径
ctx.stroke();// 描边
示例3：填充三角形
<canvas class="canvas" width="500" height="500">暂不支持</canvas>
// 获取画布
let canvas = document.querySelector('.canvas')
// 创建画笔
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0,200)
ctx.lineTo(100,0)
ctx.fill(); // 填充闭合区域。如果path没有闭合，则fill()会自动闭合路径
六、绘制圆弧
1、arc(x, y, r, startAngle, endAngle, boolen): 以(x, y) 为圆心，以r 为半径，从 startAngle 弧度开始到endAngle弧度结束。boolen 是布尔值，true 表示逆时针，false 表示顺时针(默认是顺时针)。
注意：
-
这里的度数都是弧度。
-
0弧度是指的x轴正方向。radians=(Math.PI/180)*degrees //角度转换成弧度
2、arcTo(x1, y1, x2, y2, radius): 根据给定的控制点和半径画一段圆弧，最后再以直线连接两个控制点。
示例1：
// 获取画布
let canvas = document.querySelector('.canvas')
// 创建画笔
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(50, 50, 40, 0,Math.PI, false);
ctx.stroke();
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GjMmDE4j-1652800931055)(https://s2.loli.net/2022/05/17/ychHP8jbCikE4Nl.png)]
示例2：
ctx.beginPath();
ctx.arc(50, 50, 40, 0, Math.PI * 2, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(150, 50, 40, 0, Math.PI, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(250, 50, 40, 0, Math.PI / 2, false);
ctx.stroke();
ctx.beginPath();
ctx.arc(350, 50, 40, 0, Math.PI / 3, false);
ctx.stroke();
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fr174P5f-1652800931056)(https://s2.loli.net/2022/05/17/fBwt8WziInZ4Dak.png)]
示例3：
ctx.beginPath();
ctx.arc(50, 150, 40, 0, Math.PI * 2, true);
ctx.stroke();
ctx.beginPath();
ctx.arc(150, 150, 40, 0, Math.PI, true);
ctx.stroke();
ctx.beginPath();
ctx.arc(250, 150, 40, 0, Math.PI / 2, true);
ctx.stroke();
ctx.beginPath();
ctx.arc(350, 150, 40, 0, Math.PI / 3, true);
ctx.stroke();
示例4：
ctx.beginPath();
ctx.arc(50, 250, 40, 0, Math.PI * 2, false);
ctx.closePath(); //闭合路径·
ctx.stroke();
ctx.beginPath();
ctx.arc(150, 250, 40, 0, Math.PI, false);
ctx.closePath(); //闭合路径·
ctx.stroke();
ctx.beginPath();
ctx.arc(250, 250, 40, 0, Math.PI / 2, false);
ctx.closePath(); //闭合路径·
ctx.stroke();
ctx.beginPath();
ctx.arc(350, 250, 40, 0, Math.PI / 3, false);
ctx.closePath(); //闭合路径·
ctx.stroke();
示例5：
ctx.beginPath();
ctx.arc(50, 350, 40, 0, Math.PI * 2, true);
ctx.closePath(); //闭合路径·
ctx.stroke();
ctx.beginPath();
ctx.arc(150, 350, 40, 0, Math.PI, true);
ctx.closePath(); //闭合路径·
ctx.stroke();
ctx.beginPath();
ctx.arc(250, 350, 40, 0, Math.PI / 2, true);
ctx.closePath(); //闭合路径·
ctx.stroke();
ctx.beginPath();
ctx.arc(350, 350, 40, 0, Math.PI / 3, true);
ctx.closePath(); //闭合路径·
ctx.stroke();
