canvas

1.常用 api

1.旋转中心点设置
ctx.rotate(20*Math.PI/180);           以画布（0,0）
ctx.rotate(20*Math.PI/180,50,20);     以画布（50,20）

2.相对定位原点
translate() 方法重新映射画布上的 (0,0) 位置

3.画圆
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
圆心x y，半径r ，起始角sAngle（弧的圆形的三点钟位置是 0 度）, eAngle 顺时针(默认值)/逆时针(false/true)

4.清除指定区域矩形
clock.clearRect(0,0,1000,1000);

5.在画布上绘制文本
context.strokeText(text,x,y,maxWidth);

6.font 属性设置或返回画布上文本内容的当前字体属性。
context.font="italic small-caps bold 12px arial";

7.linewidth 设置或返回当前线条的宽度
canvas.linewidth

8.画矩形  左上角的 x  y 坐标，宽度，高度
context.fillRect(x,y,width,height);

9.context.fillText(text,x,y,maxWidth);

 

2. 相关资源

HTML 5 Canvas 参考手册

HTMLCanvas​Element