画布canvas

12.19学习了画布的使用

1.创建画布：<canvas></canvas>
    2.准备画笔(获取上下文对象):canvas.getContext('2d');
    3.开始路径规划：context.beginPath();
    4.移动起始点：context.moveTo(x,y);
    5.绘制线(矩形，圆形，图片...)：context.lineTo(x,y)
    6.闭合路径:context.closePath();
    7.绘制路径：context.stroke();
strokeStyle:设置画线颜色

lineWidth: 设置线条的宽度

lineCap: 设置端点的形状

moveTo: 移动画笔到某一处

lineTo: 设置线条的端点所处位置

stroke() :用来画线

fill(): 用来填充区域

fillStyle: 用来设置填充颜色，可以16进制也可以直接写英文名称

beginPath(): 重置路径 通常用来 设置两个不一样样式的形状

closePath(): 闭合路径 通常用来 闭合一些形状

rect(): 设置矩形 参数1：x 参数2： y 参数3： width 参数4： height

arc(): 设置圆 参数1: 圆心x 参数2：圆心 y 参数3： 半径 参数4： 起始角度 参数5：结束角度 360 * Math.PI / 180

ellipse(): 设置椭圆 参数：圆心 x,y 半径x,y 旋转角度，起始角度，结束角度

ctx.ellipse(300,500,100,50,0,0,360 * Math.PI / 180)

font: 设置字体样式

fillText('xxx',0,0) 参数： 文本，文本x坐标与文本y坐标

createLinearGradient(200,0,200,100):设置渐变
画布渐变

• createLinearGradient(x,y,x1,y1) - 创建线性渐变
• createRadialGradient(x,y,r,x1,y1,r1) - 创建径向/圆形渐变

• addColorStop() 方法指定颜色停止点及其沿渐变的位置。渐变位置可以是0到1之间的任意位置。

  要使用渐变，请将 fillStyle 或 strokeStyle 属性设置为渐变，然后绘制形状（矩形、文本或直线）。