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、颜色，样式，阴影

//设置或返回用于笔触的颜色、渐变或模式,默认颜色为#000ctx.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、绘图