Canvas 绘制各个图形

绘制直线

context.beginPath();    // 开始划线(预备)spa

context.moveTo(10, 10);   // 设置路径起点对象

context.lineTo(300, 300);   // 设置路径终点top

context.stroke();    // 绘制路径轮廓di

绘制三角形

context.beginPath();   // 开始划线(预备)co

context.moveTo(400, 40);    // 设置路径起点context

context.lineTo(300, 300);   // 设置路径终点颜色

context.lineTo(700, 300);tar

context.closePath();    // 关闭路径arc

context.stroke();   // 绘制路径轮廓

描边图形, stroke

填充图形, fill

绘制圆

context.beginPath();

context.arc(x, y, radius, startAngel, endAngel, false);

context.closePath();

context.stroke();

x, y    肯定圆心的位置

radius    圆的半径

starAngel    开始角度

endAngel    结束角度

lineWidth 设置线宽

context.lineWidth = 10;

lineCap 设置线帽

阴影

shadowBlur: 设置阴影的模糊程度, 值越大越模糊, 默认值0

shadowOffsetX: 设置阴影在水平方向偏移量

shadowOffsetY: 设置阴影在垂直方向偏移量

shadowColor: 设置阴影颜色

渐变

线性渐变: createLinearGradient(x0, y0, x1, y1)

x0, y0 肯定渐变起点

x1, y1 肯定渐变终点

为渐变对象设置颜色

addColorStop(offset, color)

offset 颜色的偏移值, 取值范围0~1(0 表示渐变起点, 1 表示渐变终点)

color 该偏移值上对应的颜色值

放射渐变: createRadialGradient(x0, y0, r0, x1, y1, r1)

x0, y0, r0    肯定一个圆(起始圆)

x1, y1, r1 肯定一个圆(结束圆)

径向渐变(放射渐变的特殊设置):

createRadialGradient(500, 250, 10, 500, 250, 200);

绘制二次曲线

quadraticCurveTo(cpx, cpy, x, y)

cpx, cpy  控制点坐标

x, y  目标点坐标

绘制三次曲线

bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x, y)

cp1x，cp1y表示第一个控制点的坐标

cp2x，cp2y表示第二个控制点的坐标

x，y是终点的坐标；