canvas是html5新设的元素对象，它的存在就相当于在浏览器窗口内给我们准备出canvas元素的区域的空白画布让我们随意填写，当然，画画的“笔”就是canvas给我们的接口啦。另外canvas是按照我们所设的代码规则按像素将图像画出的，相当于位图。<canvas>默认定义大小为300像素宽150像素高，一般会在canvas标签内设置canvas大小，例如，<canvas width="600" height="200"></canvas>即设置了600*200大小的画布区域。有人会问，如果我不在canvas标签内设置大小，我通过css设置canvas大小会怎样呢？答案是canvas是css设置的那么大，不过是把默认的300*150伸展或压缩到css设置的大小。
canvas只有高级浏览器会支持，如果是低端浏览器怎么办呢？可以在canvas标签内设置提示内容，像这样，<canvas>您的浏览器不支持canvas！</canvas>，这样低端浏览器解析到canvas标签时会把提示内容展示出。
下面具体介绍一下canvas的“画笔”
首先取得canvas上下文内容：
var canvas = document.getElementById(‘myCanvas‘); //<canvas width="300" height="200" id="myCanvas"></canvas>
var context = canvas.getContext(‘2d‘); //目前就是取canvas的2d上下文
1.实心的矩形
context.fillRect(10, 11, 100, 101);//从(10,11)这个坐标位置开始画，宽度为100，高度为101
如果想画一个粉红色的实心矩形，应该这么做：
context.fillStyle = ‘pink‘;//context.fillStyle 可以设置画笔颜色，设置好之后后面画出的图形颜色就是pink啦（注意只是设置填充的颜色）
context.fillRect(10,11,100,101);
举个栗子，如果想设置画布背景色为blue可以这么来：
context.fillRect(0, 0, canvas.width, canvas.height);
2.线
画一条从(110,150)到(250,75)的直线。
context.beginPath();
context.moveTo(110,150);
context.lineTo(250,75);;//以上几步像用铅笔描了一下路线一样，而且只有我自己能看见别人看不见，“画在心中”
context.lineWidth = 5;
content.stroke();//直线画出来了
如果是想画一个空心的三角形呢？这样来：
context.beginPath();
context.moveTo(110,150);
context.lineTo(250,75);
context.lineTo(75,250);
context.closePath();//线闭合
context.stroke();//三角形画出来了
3.弧
弧的接口是这样的：
context.arc(x,y,radius,startAngle,endAngle,direction);
x,y:为圆心坐标
radius：为半径
startAngle：为相对于x轴的起始弧度
endAngle：相对于x轴的终止弧度
direction:顺时针画还是逆时针画。true为逆时针false为顺时针
例如：如果想画一个第一象限的弧可以这么来
context.arc(100,100,75,0,(90*Math.PI)/180,true)//例子错误，待续。。
原文地址：http://www.cnblogs.com/it-snail/p/3845394.html
