canvas

var canvas=document.createElement("canvas"),

1、getContent()

//设置元素为2d或者3d效果
ctx=canvas.getContext("2d");

2、路径

//起始一条路径
ctx.beginPath()

//结束路径
ctx.closePath()

//绘制一条路径
ctx.stroke()

//用于填充当前绘画
ctx.fill()

//新增一个新起点
ctx.lineTo(x,y)

//不创建线条，把画布移动到指定点
ctx.moveTo(x,y)

3、线条属性

//线条粗细
ctx.lineWidth = "5";

//线条的圆角
ctx.lineCap = "dutt|round|square";

//两线相交处角的形状
ctx.lineJoin = "bevel|round|miter";

//限制斜连长度，只有当lineJoin=miter才能设置
ctx.miterLimit = 10;

4、颜色，样式，阴影

//设置或返回用于笔触的颜色、渐变或模式,默认颜色为#000
ctx.strokeStyle = "red";

//用于填充画布
cxt.fillStyle = color|gradient|pattern;

//设置阴影的模糊度
ctx.shadowBlur = 20;

//设置阴影的颜色
ctx.shadowColor = "#757575";

//设置阴影的水平偏移量
ctx.shadowOffsetX = 20;

//设置阴影的垂直偏移量
ctx.shadowOffsetY = 30;

// 创建渐变
var gradient = ctx.createLineGradient(x1,y1,x2,y2);

//规定渐变对象中的颜色和位置
gradient.addColorStop("0",red);
gradient.addColorStop("0.5",blue);

//使用图片，画布，视频进行填充
var pattern= ctx.createPattern(image,repeat|no-repeat|repeat-x|repeat-y);

//使用圆形渐变进行填充
var pattern= ctx.createRadialGradient(x0,y0,r0,x1,y1,r1);

5、矩形

//创建矩形
ctx.rect(x,y,w,h);

//绘制填充的矩形
ctx.fillRect(x,y,w,h);

//绘制无填充的矩形
ctx.strokeRect(x,y,w,h);

//清除矩形
ctx.clearRect(x,y,w,h);

6、文本
7、转换
8、绘图