获取canvas对象
获取绘图上下文 var gd=oC.getContext('2d');
重新开始路径 gd.beginPath();
起始点 gd.moveTo(x,y);
目标点 gd.lineTo(x,y);
设置描边颜色 gd.strokeStyle='red';
设置线宽 gd.lineWidth=20;
描边 gd.stroke();
填充颜色 gd.fillStyle='red';
填充 gd.fill();
闭合路径 gd.closePath();
现有图形
1)矩形
a)
gd.rect(x,y,w,h)
gd.stroke()/fill(();
b)
gd.strokeRect(x,y,w,h);
gd.fillRect(x,y,w,h);
2)画弧(画圆)
gd.arct(cx,cy,r,s,e,d)
gd.stroke()/fill(();
cx,cy 圆心位置
r 半径
s 开始的弧度
e 结束的弧度
d 是否逆时针
角度-》弧度
n*Math.PI/180
弧度-》角度
n*180/Math.PI
清屏
gd.clearRect(x,y,w,h);
清屏-》改变值-》重新画
帧频
低帧频
高帧频
文字
gd.font="大小 类型";
gd.textAlign='center';
gd.textBaseline='middle'
gd.strokeText(str,x,y);
gd.fillText(str,x,y);
渐变
var lg=gd.createLinearGradient(x1,y1,x2,y2);
lg.addColorStop(0-1,color);
var rg=gd.creatRadialGradient(cx1,cy1,r1,cx2,cy2,r2);
rg.addColorStop(0-1,color);