其实canvas本身很简单，就是去学习它的API，多看实例，多自己动手练习，多总结。但是canvas的API实在是有点多，对于初学者来说，可能学到一半就止步不前了。我也有这种感觉，在学习的过程中，编写实例，用到了其中很多的属性和方法，但是回头来看的时候总觉得什么也没用。所以决定系统性的记录一下它常用到的API，方便以后查阅，也顺便造福一下大家。

另外：附一个之前学习的时候自己跟着教程写的一个小游戏：tinyHeart小游戏

开始之前

假设html代码中有一个canvas标签：

你的浏览器不支持canvas！</canvas>

如果你的浏览器是IE8及以下，那么很遗憾，上面那段文字会被渲染出来！而且下面的方法也都不能使用了；所以请使用支持canvas的浏览器来使用后面的方法。

.ctx = can.getContext(‘2d’);

另外我们可以还可以得到容器的宽和高度

canHei

canvas只是一个容器，本身没有绘制的能力，所以我们要得到一个画布ctx，使之具有绘制各种图形的能力。下文所有的方法都是ctx的方法。

绘制

绘制一个矩形：

..clearRect(x, y, width, height); //绘制动态效果时，常用来清除整个画布

绘制路径:

//新建路径，beginPath是绘制新图形的开始 ctx.beginPath() //路径（线）的起点，一般在上面这条命令后执行 ctx.moveTo(x, y) //线的终点 ctx.lineTo(x, y) /..closePath() //通过线条绘制轮廓（边框） ctx.stroke() //通过路径填充区域（实心） ctx.fill()

说明：

1.fill()和stroke()函数表示绘图结束。如果要继续绘制，需要重新新建路径（beginPath()）。

2.如果lineTo()最后的路径没有封闭，fill()函数会自动封闭路径，而stroke()函数不会。

例：绘制一个三角形

).))

样式

颜色

..

线段端点

.、'round(圆弧)'、'square(方形)' //线段端点显示的样式

lineCap ](ii..i)i)

效果如下图：

线段连接处

、round(圆角)、`bevel(横线)` //两线段连接处所显示的样子

lineJoin ](iilineJoin[i].i.i.i.i.i.stroke(); }

效果如下图：

虚线

])

ctx offset () { offset) { offset ...])offset)(draw, 20);

效果如下图：

渐变

bg1 ).).));

).))bg);

效果如下图：

).)))bg1);

效果如下图：

文字

.......)..); //边框文字

效果如下图：

文字的属性出了上面的列出的以外，还有以下一些属性：

...

图像

().); //img为图像，(0, 0)为起始坐标

这里的img可以是一个img对象，也可以是一个img元素。

style.);

另外，绘制图片的时候还可以对图片进行缩放，类似于css中的background-size：

w, h); //w、h指定图片的宽高，则会同比例缩放。

变形

慢慢的从这里开始，就要开始涉及到复杂的绘制了。而开始复杂的绘制之前，我们得先了解一个概念：canvas绘图的状态。

状态

canvas 的状态就是当前画面应用的所有样式和变形的一个快照。另外，用来操作这个状态的有两个方法：save()和restore()。save()用来保存当前状态，restore()用来恢复刚才保存的状态。他们都可以多次调用。

.)..).);

效果如下图：

位移(translate)

ctx.translate(x, y); //更改canvas的原点

(ii.))

效果如下图：

旋转

) //参照原点顺时针旋转360度

)(ii.(((jj./(i.i.).restore(); }

效果如下图：

缩放

ctx.scale(x, y); //基于原点缩放，x、y是两个轴的缩放倍数

..)..); ctx.fill();

本来绘制的是一个半径为60的圆形，但是经过缩放之后，实际效果如下：

动画

元素的位置移动，就形成了动画。