canvas基本使用

canvas的基本使用

在页面中先创建一个<canvas></canvas>画布，通过js去画笔
先获取canvas元素，再通过getContext方法确定画布类型为2d还是3d

const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

以左上角为(0, 0)开始，通过moveTo(x, y)，确定起点

context.moveTo(x, y)

使用lineTo(x, y)确定终点

context.lineTo(x, y)```
`strokeStyle`可以设置线条颜色，`lineWidth`可以设置线条宽度
```js
context.strokeStyle = 'pink';
context.lineWidth = '10'; //设置宽度为10px

fillStyle设置填充颜色，fill()方法填充

context.fillStyle = 'blue';
context.fill();

closePath闭合路径

context.closePath();

最后stroke()画图

context.stroke()

绘制矩形

使用strokeRect(x, y, width, height)方法

context.strokeRect(100, 100, 200, 200);

fillRect(x, y, width, height)画一个填充的矩形，默认为黑色

context.fillRect(100, 100, 200, 200);

绘制圆形

arc(x, y, radius, starAngle, endAngle, anticlockwise)
x：圆心的x坐标
y：圆心的y坐标
radius：半径
starAngle：开始角度
endAngle：结束角度
anticlockwise：是否逆时针，true为逆，false为true

beginPath()标志着圆形绘制的开始

context.beginPath(); //开始
context.arc(100, 100, 50, 0, 2*Math.PI, true);
context.stroke();

添加文字

使用fillText(test, x, y)

context.font = '28px 微软雅黑'; //设置字体格式
context.fillStyle = 'pink'; //设置字体颜色
context.fillText('test', 50, 50); //设置文字位置

清除画布

使用clearRect(x, y, width, height);

context.clearRect(0, 0, 100, 100);