绘制图片

在Canvas画布中, 可以使用图片(jpg, gif, png等格式).

常用图片方法

drawImage(); // 绘制图片
getImageData(); // 返回一个矩形 copy原图
putImageData(); //  指定位置放置图片

绘制图片步骤

• drawImage(image, x, y)

  image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。

  var img = new Image();   // 创建img元素
  img.onload = function(){  // 图片加载完才会执行drawImage()
    drawImage(img, 0, 0);
  }
  img.src = 'myImage.png'; // 设置图片源地址

在背景图片上绘制曲线

function draw() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var img = new Image();
    img.onload = function(){
      ctx.drawImage(img,0,0);
      ctx.beginPath();
      ctx.moveTo(30,96);
      ctx.lineTo(70,66);
      ctx.lineTo(103,76);
      ctx.lineTo(170,15);
      ctx.stroke();
    }
    img.src = 'images/img.png'; // 这里放背景图片
  }

翻转颜色

window.onload = function() {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("tulip");
    ctx.drawImage(img,0,0);

    // 获取矩形
    var imgData=ctx.getImageData(0,0,c.width,c.height);

    // 反转颜色
    for (var i=0;i<imgData.data.length;i+=4){
        imgData.data[i]=255-imgData.data[i];
        imgData.data[i+1]=255-imgData.data[i+1];
        imgData.data[i+2]=255-imgData.data[i+2];
        imgData.data[i+3]=255;
                  }
        ctx.putImageData(imgData,0,0);
            }