Canvas

canvas现有图形

  rect  矩形 （x，y，w，h）
  arc  圆形 （cx，cy，r，s，e，d）

角度转弧度

  n*Math.PI/180

弧度转角度

  n*180/Math.PI

文字

  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.createRadialGradient(cx1,cy1,r1,cx2,cy2,r2);
  rg.addColorStop(0-1,color);

rotate\translate\scale

  所有操作的原点都是画布的左上角
  操作的都是画布

步骤

  保存画布当前状态
    gd.save();
    操作
    画图
    还原回去
    gd.restore();

图片

  获取图片数据
  var data = oC.toDataURL('类型');
    image/png       默认
    image/jpeg
  图片背景
  oImg.onlaod= function (){
    var cp = gd.createPattern(oImg,'平铺方式');
    //.......
};