H5

1.矩形
ctx.strokeRect() ctx.fillRect()
ctx.clearRect()//清除画布
2.文本 ctx.storkeText() ctx.fillText() ctx.measureText(txt) obj.width
3.路径 描边 填充 裁减 渐变
ctx.beginPath() ctx.closePath()
ctx.moveTo() ctx.lineTo() ctx.arc()
ctx.stroke() ctx.fill() ctx.clip()
4.图像 ctx.drawImage
绘图上下文的状态改变和变形
ctx.rotate( deg );//画笔旋转 deg//角度
ctx.translate(x,y);//变化坐标原点的变化平移
ctx.scale(x,y);//画笔 缩放
ctx.save();//保存绘图上下文 当前的变形数据
ctx.restore();//恢复最近一次保存的画笔的变形状态

// 保存画笔的当前变形的状态
ctx.save();
// 原点做平移
ctx.translate(img.width/2,img.height/2)
// 旋转画笔
ctx.rotate(deg * Math.PI/180);
ctx.drawImage(img,-(img.width/2),-(img.height/2));
// 逆向旋转
// ctx.rotate(-deg * Math.PI/180);
// 恢复原点
// ctx.translate(-(img.width/2),-(img.height/2));
// 恢复到上一次的保存变形状态
ctx.restore();

svg:矢量图
var rect = document.createElementNS(“http://www.w3.org/2000/svg”,“rect”);
其中"rect" 可替换为"circle"//圆
“elliipse”//椭圆
“line”//线
“polyline”//折线
“polygon”//多边形
等