canvas - 绘制图片

canvas - 图片绘制

1、 按照图片原大小加载

   drawImage(img,x,y)

   img - 当前加载的图片
   x和y - 图片左上角的位置 

注意：
必须要保证图片加载完毕后，再绘制图片（绘制写在onload事件里面）

2、 平铺图片

    var ptn = context.createPattern(img,type) 

    img : 平铺的图片
    type: 平铺的方式 — 四种，使用时记得加 " " 
        repeat/no-repeat/repeaet-x/repeat-y
返回一个平铺对象，将这个对象作为将要绘制图像的填充颜色     

    context.fillStyle=ptn; //填充
    context.fillRect(x,y,width,height); //绘制

注意：

    必须要保证图片加载完毕(onload事件)后，再绘制图片，createPattern也要等到图片加载完毕后执行    

完整的 drawImage

drawImage(img_elem,dx_or_sx,dy_or_sy,dw_or_sw,dh_or_sh,dx,dy,dw,dh); 

dx_or_sx,dy_or_sy
dw_or_sw,dh_or_sh 
dw,dh 
以上三对数值不写就是按图片原大小加载
增加一对 --> 匹配 dw,dh 即： drawImage(img_elem,dx,dy,dw,dh);
增加两对 --> 会报错;
增加三对 --> 全部匹配 即：drawImage(img_elem,sx,sy,sw,sh,dx,dy,dw,dh);

4、 图形切割

clip的定义和用法

clip() 方法从原始画布中剪切任意形状和尺寸。
提示：一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。
您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

1. 矩形切割
   context.rect(x,y,width,height);
   context.clip()

2. 圆型切割
   context.arc(x,y,radius,startAngle,endAngle,direction)
   context.clip()

3. css中的切割
   clip:rect(0px 50px 200px 0px)
   数值对应 上、下、左、右四个方向的切割量

矩形切割的实例

  
不使用 clip()：
  
      Your browser does not support the HTML5 canvas tag.
  
   


使用 clip()：

    Your browser does not support the HTML5 canvas tag.

   

 

canvas - 部分转换、其他方法

1、 scale(x,y); — 缩放

     x - 水平方向上的缩放   
     y - 初值方向上的缩放

  context.scale(sx,sy);
  sx: 让x和width进行缩放
  sy: 让y和height进行缩放

  多次缩放效果会进行叠加
  context.fillRect(x,y,width,height);//绘制

2、translate(x,y) — 重新映射画布上的（0,0）位置

  context.translate(tx,ty); // 即原来的参考点移到（tx，ty）点
  context.fillRect(x,y,width,height); //绘制，x 和 y 是相对于点（tx，ty）

  tx和ty改变了矩形的x和y的参考点，也可以改变旋转的中心点

3、rotate(degrees * Math.PI / 180) — 旋转画布

   degrees：代表你想旋转的角度

   正数： 顺时针

4、 save() 保存当前画布属性、状态

在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存

5、 resotre() 恢复画布属性状态

使用 resotre()恢复上一次被改变前的状态

---

上一篇：canvas绘制文字、矩形、圆形、线条