canvas基本用法

<canvas id="myCanvas" width=150 height=150>
    浏览器不支持的替代内容
</canvas>

canvas是双标签，中间的内容用于浏览器不支持时显示

canvas默认有宽高，width=300,height=150,可以用CSS设置宽高，但CSS宽高与canvas在HTML宽高比例不一样，会出现扭曲

绘画功能需要通过脚本获取渲染上下文和绘画功能，方法是：canvas.getContext()

绘制矩形

//绘制一个填充矩形
fillRect(x,y,width,height);

//绘制一个描边矩形
strokeRect(x,y,width,height);

//清楚指定矩形区域，将其变透明
clearRect(x,y,width,height);

绘制路径

步骤：

1、首先，新建一条路径，beginPath()绘图命令被指定生成路径；

       
生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，然后我们就可以重新绘制新的图形。

2、然后用绘图命令去画路径，如: moveTo(),lineTo()；

3、关闭路径，closePath()，会绘制一条从当前点到开始点的闭合直线，图形绘制命令重新回到上下文中；

注意：没了`closePath()`，fill()默认会闭合，而stroke()则不会

4、一旦路径生成，用填充fill()或描边stroke()渲染图形

绘制圆弧

arc(x,y,radius,startAngle,endAngle,anticlockwise)

设置填充或描边的颜色：

fillStyle = "red";
strokeStyle = "green";

canvas绘图内容还挺多的，后续还需要在学习