其实canvas本身很简单，就是去学习它的API，多看实例，多自己动手练习，多总结。但是canvas的API实在是有点多，对于初学者来说，可能学到一半就止步不前了。我也有这种感觉，在学习的过程中，编写实例，用到了其中很多的属性和方法，但是回头来看的时候总觉得什么也没用。所以决定系统性的记录一下它常用到的API，方便以后查阅，也顺便造福一下大家。
开始之前
假设html代码中有一个canvas标签：
<canvas>你的浏览器不支持canvas！</canvas>
如果你的浏览器是IE8及以下，那么很遗憾，上面那段文字会被渲染出来！而且下面的方法也都不能使用了；所以请使用支持canvas的浏览器来使用后面的方法。
//获取canvas容器 var can = document.getElementById(‘canvas'); //创建一个画布 var ctx = can.getContext(‘2d');
另外我们可以还可以得到容器的宽和高度
var canWid = can.width; //canvas 的宽度 var canHei = can.height; //canvas 的高度
canvas只是一个容器，本身没有绘制的能力，所以我们要得到一个画布ctx，使之具有绘制各种图形的能力。下文所有的方法都是ctx的方法。
绘制
绘制一个矩形：
//填充矩形（x, y是横纵坐标，原点在canvas的左上角） ctx.fillRect(x, y, width, height); //边框矩形，默认1px 黑色。 ctx.strokeRect(x, y, width, height); //清除指定的矩形区域，变为透明 ctx.clearRect(x, y, width, height); //绘制动态效果时，常用来清除整个画布
绘制路径:
//新建路径，beginPath是绘制新图形的开始 ctx.beginPath() //路径（线）的起点，一般在上面这条命令后执行 ctx.moveTo(x, y) //线的终点 ctx.lineTo(x, y) //绘制圆形 ctx.arc(x, y, r, start, end, true/false) //x, y圆心，r半径，start和end是开始和结束角度，false表示顺时针（默认），true表示逆时针。 //绘制弧线 ctx.arcTo(x1, y1, x2, y2, r); //当前端点、(x1,y1)和(x2,y2)这三个点连成的弧线，r是半径。 //闭合路径，不是必须的，如果线的终点跟起点一样，会自动闭合。 ctx.closePath() //通过线条绘制轮廓（边框） ctx.stroke() //通过路径填充区域（实心） ctx.fill()
说明：
fill()和stroke()函数表示绘图结束。如果要继续绘制，需要重新新建路径（beginPath()）。
如果lineTo()最后的路径没有封闭，fill()函数会自动封闭路径，而stroke()函数不会。
例：绘制一个三角形
ctx.beginPath(); ctx.moveTo(75, 50); //路径起点 ctx.lineTo(100, 75); ctx.lineTo(100, 25); ctx.fill(); //自动将路径闭合，并默认填充黑色。
样式
颜色
ctx.fillStyle = 'red' //针对fill()有效的颜色，还可以取值：'#fff'、'rgba(0, 0, 0, 0.5)'等。 ctx.strokeStyle = 'red' //针对stroke()有效的颜色，取值同上。 ctx.globalAlpha = 0.5; //透明度
线段端点
ctx.lineWidth = 2; //线条宽度 ctx.lineCap = 'butt(默认)'、'round(圆弧)'、'square(方形)' //线段端点显示的样式
var ctx = document.getElementById('canvas').getContext('2d'); var lineCap = ['butt','round','square']; ctx.strokeStyle = 'black'; for (var i=0;i<lineCap.length;i++){ ctx.lineWidth = 15; ctx.lineCap = lineCap[i]; ctx.beginPath(); ctx.moveTo(25+i*50,10); ctx.lineTo(25+i*50,140); ctx.stroke(); }
效果如下图：
线段连接处
ctx.lineJoin = 'miter(默认)'、round(圆角)、`bevel(横线)` //两线段连接处所显示的样子
var ctx = document.getElementById('canvas').getContext('2d'); var lineJoin = ['round','bevel','miter']; ctx.lineWidth = 10; for (var i=0;i<lineJoin.length;i++){ ctx.lineJoin = lineJoin[i]; ctx.beginPath(); ctx.moveTo(10,50+i*40); ctx.lineTo(50,10+i*40); ctx.lineTo(90,50+i*40); ctx.lineTo(130,10+i*40); ctx.lineTo(170,50+i*40); ctx.stroke(); }
效果如下图：
虚线
ctx.setLineDash([4, 2]) //设置虚线，参数为数组，第一个值为实现宽度，第二个值为空白的宽度 ctx.lineDashOffset = 0; //虚线起始偏移量
var can = document.getElementById('canvas'); var ctx = can.getContext('2d'); var offset = 0; function draw() { offset++; if (offset > 16) { offset = 0; } ctx.clearRect(0,0, can.width, can.height); ctx.setLineDash([6, 2]); ctx.lineDashOffset = -offset; ctx.strokeRect(10,10, 100, 100); } setInterval(draw, 20);
效果如下图：
渐变