HTML5 CANVAS制图 基础总结
首先，定义2d渲染变量ct（这里用了jquery库）：
var ct = $(#canvasid).get(0).getcontext('2d');
以下是绘制各种基本图形的方法：
复制代码
//绘制矩形(填充/描框)
ct.fillrect(x,y,w,h)
ct.strokerect(x,y,w,h)
//绘制路径--线条
ct.beginpath();
ct.moveto(x0,y0);
ct.lineto(x1,y1);
ct.closepath();
ct.stroke();
//绘制路径--圆弧
ct.beginpath();
ct.arc(x,y,r,start,end,true);
ct.closepath();
ct.fill();
//绘制文本
ct.font = "30px serif...";
ct.filltext(txt,x,y);
ct.stroketext(txt,x,y);
//设置样式
ct.fillstyle = "rgb(r,g,b)";
ct.strokestyle = "rgb()";
ct.linewidth = 5;
复制代码
还提供了一些灵活的方法：
//橡皮擦（擦除矩形范围）
ct.clearrect(x,y,w,h);
//重置样式
canvas.attr("width",w);
二、高级功能
以下是对画布的一些变换操作：
复制代码
ct.save()/restore() //保存/恢复
ct.translate(x,y) //平移
ct.scale(a,b) //放大、缩小
ct.rotate(math.pi) //绕(0,0)旋转
//变换矩阵
ct.transform(xscale,yskew,xskew,yscale,xtrans,ytrans)
ct.settransform(xscale,yskew,xskew,yscale,xtrans,ytrans) //重置
复制代码
关于变换矩阵，有一篇很好的文章可以加深你的理解：https://shawphy.com/2011/01/transformation-matrix-in-front-end.html
这是些常用的操作：
复制代码
ct.globalalpha = 0.5 //透明度
//阴影
ct.shadowblur = 20; //扩散
ct.shadowoffsetx = 10;
ct.shadowoffsety = 10;
ct.shadowcolor = rgba;
//渐变（线性/放射性）
ct.createlineargradient(x,y,x1,y1)
ct.createradialgradient(x,y,r,x1,y1,r1)
//设渐变的始终颜色
addcolorstop(0,"rgb()")/(1,"rgb()");
复制代码
贝塞尔曲线绘制：
//最后两个参数是终点的坐标点
ct.beginpath();
ct.moveto(50,250);
ct.quadraticcurveto(250,100,450,250) //两次贝塞尔曲线
ct.beziercurveto(150,50,350,450,450,250) //三次贝塞尔曲线
ct.stroke();
画布导出为图像：
//生成图片的src地址
var imgurl = canvas.get(0).todataurl();
//以下将画布替换为图片
var img = $("<img></img>");
img.attr("src",imgurl);
canvas.replacewith(img);
三、图片处理
图片的引入和调整（图片的变换就是画布的变换，不再介绍）：
//引入图片
var img = new image();
img.src = ".jpg";
$(img).load(function(){
ct.drawimage(参数);
})
//图片调整
ct.drawimage(image,x,y,w,h)
//图片裁剪与调整，其中dx/dy/dw/dy为裁剪的参数
ct.drawimage(image,dx,dy,dw,dh,x,y,w,h)
复制代码
高级处理（关于图像像素的绘制和处理，仅供了解）：
//imgdata对象
var imgdata = ct.getimagedata(x,y,w,h) //获取
//imgdata对象的属性
imgdata.width/height //宽高
imgdata.data //像素集合数组，表示rgba
//创建图像
var imgdata = ct.createimagedata(w,h)
ct.putimagedata(imgdata,x,y)
以上都是比较基本的知识点总结，没写的太细，只求清晰易查及备忘，如果对哪个点不是很明白，完全可以复制关键字google。
至此，基础知识已经总结完了，不过以上仅仅是基本的静态画布制作而已，如果你懂得灵活应用javascript，结合canvas就可以制作出很漂亮的动画或游戏。这些应用已经很多了，感兴趣可以自行查找相关信息，不过首先你得学会js.