canvas 常用的绘图命令和属性有哪些？

常用方法：

    1、fillRect(x,y,width,height):绘制一个填充的矩形。

    2、strokeRect(x,y,width,height):绘制一个矩形的边框。

    3、clearRect(x,y,width,height):清除指定矩形区域，使其完全透明。

    4、fill():填充路径，默认颜色是黑色。

    5、stroke():绘制路径，默认颜色是黑色。

    6、beginPath():创建新路径。

    7、moveTo(x,y):将画笔移动到指定的x,y坐标点。

    8、lineTo(x,y):绘制一条从当前位置到x,y位置的直线。

    9、closePath():创建当前点回到起始点的路径。

    10、arc(x,y,radius,startAngle,endAngle,authenticate):创建弧/曲线。创建一个圆心为(x,y)，半径为radius，开始角为startAngle，结束角为endAngle的曲线 (authenticate 可选参数，默认false：逆时针绘制。)。

    以下为部分示例：

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');

// 绘制填充矩形
ctx.fillRect(50, 50, 100, 100);

// 绘制矩形边框
ctx.strokeRect(200, 50, 100, 100);

// 清除矩形区域
ctx.clearRect(50, 200, 100, 100);

// 绘制路径
ctx.beginPath();
ctx.moveTo(200, 200);
ctx.lineTo(300, 300);
ctx.stroke();

// 绘制圆
ctx.beginPath();
ctx.arc(100, 350, 50, 0, Math.PI * 2, true);
ctx.fill();

常用属性：

    1、fillStyle:设置或返回用于填充绘画的颜色、渐变或模式。

    2、strokeStyle:设置或返回用于绘制边界的颜色、渐变或模式。

    3、font:设置或返回文本内容的当前字体属性。

    4、lineWidth:设置或返回线条的宽度。

    5、lineCap:设置或返回线条的结束端点样式。

        1. butt：默认值，线条末端以方形结束。

        2. round：线条末端以圆形结束。

        3. square：线条末端以方形结束，但是增加了一个宽度和线条相同，高度是线条宽度一半的矩形区域。

    6、lineJoin:设置或返回两条线相交时，所创建的拐角类型。

        1. miter：默认值，创建尖角。

        2. round：创建圆角。

        3. bevel：创建斜角。

    7、shadowColor:设置货返回阴影的颜色。

    8、shadowBlur:设置或返回阴影的大小。

    9、shadowOffsetX:设置或返回阴影的X偏移。

    10、ShadowOffsetY:设置或返回阴影的Y偏移。

    11、globalAlpha:设置或返回绘图的当前透明度。

    12、globalCompositeOperation: 设置或返回新图像如何绘制到已有图像上。

        1. source-over：默认值。新图像在原图像上方。

        2. source-atop：新图像在原图像顶部。只有交叉区域可见。

        3. source-in：新图像在原图像中。只有交叉区域可见。

        4. source-out：新图像在原图像外。只有新图像非交叉区域可见。

        5. destination-over：新图像在原图像下方。

        6. destination-atop：新图像在原图像底部。只有交叉区域可见。

        7. destination-in：新图像在原图像中。只有原图像交叉区域可见。

        8. destination-out：新图像在原图像外。只有原图像非交叉区域可见。

        9. lighter：两个图像重叠部分的颜色相加，使得颜色变亮。

        10. copy：只显示新图像。

        11. xor：只显示新图像和原图像不重叠的部分。

    以下为部分示例：

let canvas = document.getElementById('myCanvas');
let ctx = canvas.getContext('2d');

// 设置填充颜色为红色
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);

// 设置线条宽度和颜色
ctx.lineWidth = 5;
ctx.strokeStyle = 'blue';
ctx.strokeRect(200, 50, 100, 100);

// 设置字体属性和填充颜色
ctx.font = '30px Arial';
ctx.fillStyle = 'green';
ctx.fillText('Hello World', 50, 200);