canvas

渐变：

• createLinearGradient(x1, y1, x2, y2) 起点x1, y1， 终点x2, y2
• createRadialGradient(x1, y1, r1, x2, y2, r2) 以x1, y1为原点，半径为r1的圆，和以x2, y2为原点，半径为r2的圆
• gradient.addColorStop(poristion, color) position是一个0.0-1.0之间的数值，表示渐变中颜色所在的相对位置，color表示颜色

///////////////////////双层渲染，透明层放在不透明层上层/////////线性渐变
        var canvas = document.querySelector('canvas');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');

            var lineargradient1 = ctx.createLinearGradient(0, 300, 0, 0);
            lineargradient1.addColorStop(0, 'rgba(0, 0, 0, 1)');
            lineargradient1.addColorStop(1, 'rgba(0, 0, 0, 0)');

            ctx.clearRect(0, 0, 300, 300);

            var lineargradient2 = ctx.createLinearGradient(300, 0, 0, 0);
            lineargradient2.addColorStop(0, 'rgba(255, 0, 0, 1)');
            lineargradient2.addColorStop(1, 'rgba(255, 255, 255, 1');

            ctx.fillStyle = lineargradient2;
            ctx.fillRect(0, 0, 300, 300);
            ctx.fillStyle = lineargradient1;
            ctx.fillRect(0, 0, 300, 300);

        }
///////////////////////////径向渐变
            var radialgradient = ctx.createRadialGradient(0,150,50,0,140,120);
            radialgradient.addColorStop(0, 'red');
            radialgradient.addColorStop(0.9, 'yellow');
            radialgradient.addColorStop(1, 'rgba(0, 255, 0, 0)');

            var radialgradient2 = ctx.createRadialGradient(45,45,10,52,50,30);
            radialgradient2.addColorStop(0, 'red');
            radialgradient2.addColorStop(0.9, 'yellow');
            radialgradient2.addColorStop(1, 'rgba(0, 255, 0, 0)');

            ctx.fillStyle = radialgradient;
            ctx.fillRect(0, 0, 150, 150);
            ctx.fillStyle = radialgradient2;
            ctx.fillRect(0, 0, 150, 150);

描边

ctx.strokeStyle = color;
ctx.lineWidth = ; ////设置线条宽度
ctx.strokeRect(x, y, width, height)

填充

ctx.fillStyle = color;
ctx.fillRect(x, y, width, height);

画圆

ctx.beginPath()
ctx.arc(x, y, r, startrad, endrad);
ctx.fill() / ctx.stroke()
ctx.closePath()
*****ctx.arcTo(cpX, cpY, endX, endY)******

fill()会将路径填充城一个图形 stroke()不会

绘制虚线

ctx.beginPath();
ctx.setLineDash([40,30,20,10]);
ctx.strokeStyle = 'blue';
ctx.moveTo(10, 120);
ctx.lineTo(400, 120);
ctx.stroke();

贝塞尔函数

quadraticCurveTo(cpX, cpY, endX, endY) 依据点 结束点

公式

弧长 = 半径 * 圆心角
1° = π / 180°
度数 * π / 180° = 弧长