canvas绘制图片

绘制图片

• 按图片原大小绘制
  var context = document.getElementById("canvas").getContext("2d");

    //准备图片元素对象
    var img = new Image();
    img.src = "class.jpg";
    img.width = 200;
    img.height = 200;
    
    //当图片准备以后再绘制
    img.onload = function(){
        
        //绘制图片,按照图片本身的大小进行加载
       context.drawImage(img,0,0);
    }
  

• 平铺图片
  var context = document.getElementById("canvas").getContext("2d");

   var img = new Image();
   img.src = "class.jpg";
   
   img.onload = function(){
    
      //创建平铺对象
      var pat = context.createPattern(img,"repeat-y");
   
      //将平铺对象作为填充颜色
      context.fillStyle = pat;
   
     //绘制
     context.fillRect(0,0,400,400);
        
   }
  

绘制线条

• 绘制方法

  1）设置起点坐标值

  moveTo(x,y);  
  

  2）设置终点(折点)坐标值

  lineTo(x,y);
  

• 绘制线条的属性

  1）设置线条的宽度，默认1px

    lineWidth
  

  2）设置线条端点的形状

    lineCap 起点和终点的样式
  
    butt - 平角
    round - 圆角
    square - 正方向
  

  3）设置两条线交点的形状

    lineJoin 折点的样式
  
    miter - 尖角 
    round - 圆角
    bevel - 斜角 
  

  4）miterLimit - 配合lineJoin使用

    lineJoin设置为miter，该属性值设置尖角延伸范围
  

图片切割

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

画布方法

• scale(x,y); — 缩放
  x - 水平方向上的缩放 y - 初值方向上的缩放 context.scale(sx,sy); sx: 让x和width进行缩放 sy: 让y和height进行缩放 多次缩放效果会进行叠加context.fillRect(x,y,width,height);//绘制

• 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的参考点，也可以改变旋转的中心点

• rotate(degrees * Math.PI / 180) — 旋转画布
  degrees：代表你想旋转的角度 正数： 顺时针

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

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

• resotre() 恢复画布属性状态

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