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,'平铺方式');
    //.......
};
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 4,707评论 2 32
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 3,953评论 3 40
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    J_L_L阅读 1,544评论 0 4
  • 最基本的使用创建一个画布所有的操作都在画布的context上面canvas是基于状态而不是基于对象的,比如说颜色都...
    亲爱的孟良阅读 1,673评论 0 4
  • 一、简介 HTML5 中的定义:“它是依赖分辨率的位图画布,你可以在 canvas 上面绘制任何图形,甚至加载照片...
    destiny0904阅读 10,583评论 1 4