一、绘制基本图形
在每次用canvas画布时，都有几步是“套路”
1.在html中创建canvas画布：
canvas id=mycanvas width=960px height=580px> 浏览器不支持canvas canvas>
2.获取画布标签，并得到一个2d对象：
var c = document.getelementbyid('mycanvas'); //获取标签var ctx = c.getcontext(2d); //返回一个用来绘制环境类型的环境，返回一个2d对象 ，该对象实现了一个画布使用的大多数方法。
1、绘制线条：
ctx.linewidth = 10; //设置线条宽度 ctx.strokestyle = red; //设置线条的颜色ctx.beginpath(); //创建一个新的路径ctx.moveto(10,10); //将画笔光标位置移动到坐标（10,10）处ctx.lineto(150,10); //移动画笔到坐标（150,50）处ctx.stroke(); //开始绘制定义好的路径
通过ctx.linecap=butt可以设置线条的形状。有三个可取值：butt、round、square。
2、绘制空心矩形：
md5.strokerect(100,100,200,240); //绘制空心矩形的函数，四个参数分别表示起点x、y坐标、矩形长、矩形宽
3、绘制实心矩形：
方法一：使用fillrext()函数。在绘制实心矩形时，可使用fillstyle设置图形的颜色。
方法二：
md5.rect(10,10,70,40);md5.fill();
4、画圆：
使用arc()函数可以画一个圆弧。有六个参数：圆弧中心x、y坐标、圆弧半径、起始角度、终
止角度、是否逆时针。可以调用fill()函数画一个实心圆。
5、画圆角矩形：
用arcto函数可以画圆角矩形。有五个参数：p1的x、y和p2的x、y、圆弧的半径radius。
6、擦除canvas画板：
clearrect()函数。四个参数：x、y、长度、宽度。
7、绘制复杂：二维贝塞尔曲线、三维贝塞尔曲线。
8、利用clip()函数可在指定区域绘图。
9、绘制自定义图形。
二、绘制文本　
1、cxt.font：设置字体样式。
ctx.font = 30px arial; //设置文字大小和字体样式、字体大小、斜体效果
2、cxt.stroketext()：设置文字内容。空心文字！有四个参数：文本字符串，坐标x、坐标y、文本宽 。最后一个参数可以省去，省去时文本宽度自动设定为整个文本的宽度。
ctx.stroketext(hello world,100,50); //设置文字内容
3、cxt.filltext():设置文字内容。实心文字！参数同stroketext();
4、ctx.textalign= ;设置文字对齐方式：center、left、right。
5、ctx.textbaseline= ; 设置文字纵向对齐方式：top、middle、bottom、ideographic等。
三、图片操作
1、利用drawimage()函数绘制图片，该函数有三种原型：
drawimage(image,dx,dy);drawimage(image,dx,dy,dw,dh);drawimage(image,sx,sy,sw,sh,dx,dydw,dh);
第一参数都是要绘制的对象。
绘制图像方法一：
在html添加如下代码：
img id=face src=1.jpg alt=the face width=240px height=240px>
javascript代码如下：
var img=document.getelementbyid(face);image.onload =function(){ ctx.drawimage(image,10,10); }
绘制图像方法二：
var image = new image(); image.src = 1.jpg; image.onload =function(){ ctx.drawimage(image,10,10); ctx.drawimage(image,260,10,100,100); ctx.drawimage(image,50,50,100,100,260,130,100,100); }
一定要添加图片的onload事件监听！
第一个函数从（10,10）开始绘制整张图片。
第二个函数从（260,10）绘制整张图片到长100、宽100的矩形区域内。
第三个函数表示截取图片从（50,50）到（100,100）的部分，从坐标（260,130）开始绘制，放到长100、宽100的矩形区域内。
2、利用getimagedata和putimagedata绘制图片。
3、利用createimagedata新建像素。