结束闭合，完成闭环，在开始绘制图形开头和结尾加下列代码

context.beginPath();

context.closePath();

推导图

绘制多边形的时候 要用beginpath和closepath包起来

这是我的一个混合式布局笔记，关于绘图之旅的

哈哈

结合前几节的教程，模拟了一个定时滚动的齿轮，分享一下，共同进步。

window.onload = function() {

var canvas = document.getElementById("start-canvas");

     canvas.width = 800;

     canvas.height = 800;

     var ctx = canvas.getContext('2d');

     let a = 0

     var timer = setInterval(function() {

         a++;

         if (a <= 20) {

             ctx.clearRect(0, 0, canvas.width, canvas.height);

             mutiStart(ctx, 400, 400, 300, 150, 18, 5, 18 * a)

         } else {

         a = 0;

         clearInterval(timer);

         }

    }, 1000)

}

/**

* @param {Object} ctx

* @param {Object} x Star的X轴偏移量

* @param {Object} y Star的y轴偏移量

* @param {Object} R 外圆半径

* @param {Object} r 内圆半径

* @param {Object} rot Star旋转度数（顺时针）

* @param {Object} multi 几边形

* @param {Object} angel  Star旋转度数（逆时针）

*/

function mutiStart(ctx, x, y, R, r, rot, multi, angel) {

     ctx.beginPath();

     ctx.fillStyle = "#F1FA0C";

     ctx.strokeStyle = "#F1FA0C";

     for (var i = 0; i < multi; i++) {

         ctx.lineTo(Math.cos((angel + (360 / multi) * i - rot) / 180 * Math.PI) * R + x,

         y - Math.sin((angel + (360 / multi) * i - rot) / 180 * Math.PI) * R

         )

         ctx.lineTo(Math.cos((angel + 360 / (multi * 2) + (360 / multi) * i - rot) / 180 * Math.PI) * r + x,

         y - Math.sin((angel + 360 / (multi * 2) + (360 / multi) * i - rot) / 180 * Math.PI) * r

         )

}

     ctx.closePath();

     ctx.fill();

     ctx.stroke();

}

if (balls[i].x - balls[i].radius<=0) {

                    balls[i].vx = -balls[i].vx;

                    balls[i].x = balls[i].radius;

                }

                if (balls[i].x + balls[i].radius >= canvasWidth) {

                    balls[i].vx = -alls[i].vx;

                    balls[i].x = canvasWidth-balls[i].radius;

                }

                if (balls[i].y - balls[i].radius <= 0) {

                    balls[i].vy = -balls[i].vy;

                    balls[i].y = balls[i].radius;

                }

                if (balls[i].y + alls[i].radius >= canvasHeight) {

                    balls[i].vy = -s[i].vy;

                    balls[i].y = canvasHeight-balls[i].radius;

                }

这是update函数部分

这是利用背景填充，原理跟ps里面剪贴蒙版效果一致

保存canvas状态

第三課的例子地址

第三方Canvas圖形庫

兼容性代碼示例

老IE兼容問題

Canvas标准

https://www.w3.org/TR/2dcontext/

https://html.spec.whatwg.org/

探照灯、聚光灯效果

剪纸效果：

圆环效果：注意画圆方向

非零环绕原则

clip绘制区域代码

示例效果：

globalCompositeOperation:图形重叠效果

阴影代码示例：shadowBlur：模糊程度

阴影…………：

小结：文本的度量

小结：文本对齐

小结：font

小结：文字渲染基础

运行效果：

代码示例：

代码示例：

C点为大体估计点，依此确定出R

C，B为两个控制点