创建 canvas

想使用 canvas ，首先需要在 dom 中声明一块区域（画布）并初始化画布的尺寸

<canvas id="canvas" width="200" height="100"></canvas>

使用 js 绘制

canvas 需要使用 js 在声明的画布上进行绘画。

定位 canvas

let c=document.getElementById("canvas");

创建 context 对象

let cxt=c.getContext("2d"); 

getContext() 的可能取值有四种
* "2d"
* "webgl"
* "webgl2" (或 "experimental-webgl2")
* "bitmaprenderer"

绘制

比如绘制一个红色长方形

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75); 

坐标系

规定，画布左上角坐标为原点(0,0)；x 轴正方向水平向右，y 轴正方向为竖直向下。
fillRect()方法拥有参数(0,0,150,75)。意思是从画布左上角（0，0）开始，绘制一个 x 方向长度为 150,y 方向长度为 75 的图形。

canvas 方法

线条

context.lineTo(x,y);
比如画个绿色的 L，L 起始位置为（20，20），竖线长度为80，横线长度为50，颜色为 green

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath(); //开始路径
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.strokeStyle="green";
ctx.lineWidth = 10;
ctx.stroke();

弧线

context.arc(x,y,r,sAngle,eAngle,counterclockwise);
sAngle 起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

弧

角度从 0 到 Pi 的弧，逆时针绘制

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,100,50,0,Math.PI,true);
ctx.stroke();

圆形

比如画一个被填充的圆形，圆心坐标为 （70,18），半径为 15，颜色为 天依蓝

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#66ccff";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2倍的Math.PI

矩形

矩形框

context.rect(x,y,width,height);
使用lineWidth属性设置框的粗细

ctx.beginPath();
ctx.lineWidth="4";
ctx.strokeStyle="green";
ctx.rect(30,30,50,50);
ctx.stroke();

填充矩形

context.fillRect(x,y,width,height);
使用fillStyle属性来设置用于填充绘图的颜色、渐变或模式。

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#66ffcc"; //初音绿
ctx.fillRect(20,20,150,100);

渐变

context.createLinearGradient(x0,y0,x1,y1); 方法创建线性的渐变对象
x0,y0 为渐变开始点的坐标
x1,y1 为渐变结束点的坐标
gradient.addColorStop(stop,color); 方法规定 gradient 对象中的颜色和位置。
stop 介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
color 在结束位置显示的 CSS 颜色值

比如定义一个红色到绿色的渐变色谱,起始位置为（0，0），结束位置为（175，50），其实颜色为 red，最终颜色为 green。
```js