简单聊聊CANVAS画图

CANVAS画图的基本操作非常简单，就是填充和描边，填充是fill,描边是stoke,其实很好理解，我们正常在纸上画图，也无非就是描个边填个色。

画图之前先要得到2D上下文，用getContext("2d")方法。

<canvas id="drawing" width="100px" height="100px">balabala</canvas>

var drawing=document.getElementById("drawing");

var context=drawing.getContext("2d");

然后我们就可以在这个CONTEXT上画图了。

context.stokeStyle="black";设置描边的颜色

然后画个矩形试试，context.stokeRect(30,30,50,50);（类似的还有FILLRECT）

这里传入了4个数值，也就是两组坐标。

CANVAS中坐标原点的位置默认是在画布的左上角，X轴向右递增，Y轴向下递增。

不喜欢的话可以自己移动一下在坐标原点，translate(x,y),就可以把原点移动到指定的（X，Y）坐标。

画了矩形之后，可以用CLEARRECT来清除矩形。

除了这样直接画矩形的函数，CANVAS还有画线（CANVAS里叫路径，和PS里的路径差不多）的功能，有了线这个基本单位之后，所有的图形都能画了。

要绘制路径，首先用BEGINPATH（）告诉CANVAS要开始画线了，然后可以用ARC画弧线，用LINETO画直线，BEZIERCURVETO画曲线，还有二次曲线等，也可以画矩形路径（RECT）。

画完之后记得CLOSEPATH。

注意路径默认是和上一个路径终点相连的，如果不想这样，要用MOVETO函数，这个函数移动画笔（绘图游标）到指定位置，但这个过程并不画线。

除了画图，CANVAS还可以写字，FILLTEXT和STOKETEXT即可。可以设置FONT/TEXTALIGN/TEXTBASELINE三个属性，设置一次之后，就一直保留直到下次更改（画图的时候设置的颜色啊线宽啊等等也是这样的，突然想到一句广告词，钻石恒久源，一颗永流传……）

画了图之后，还想对其进行以下修改？不要紧，CANVAS里有ROTATE函数可以把图形进行旋转，有SCALE函数把图形进行缩放，还有几个变换的函数，具体问题具体分析使用就好。

CANVAS还内置了对图像的支持，可以直接把一个图像画到画布上，用drawImage方法即可。

参考文献《JS高程》