canvas 绘制图形

// canvas 简单例子
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
    var context = canvas.getContext('2d');
    /*
     * drawImage(image,dx,dy)
     * drawImage(image,dx,dy,dw,dh)
     * drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
     * image 绘图对象
     * dx dy canvas 的坐标
     * dw，dh 表示 image 在canvas中即将绘图的位置
     * sw，sh 表示image 所要绘图的区域
     * sx,sy 所要绘图的开始位置 
     */
//    var image = document.getElementById('img');
//    context.drawImage(image, 0, 0);
     var img = new Image();
     img.src = 'images/1.jpg';
     img.onload = function(){
         
         // drawImage 
         // 从 0,0 坐标开始绘制
         // context.drawImage(img,0,0);
         // 从0，0 开始,绘制整张图到100,100 长宽
         // context.drawImage(img, 0, 0, 100, 100);
         // 截图,50,50 到 100,100 从 260,130 开始绘制，放到 100,100 长宽区域中
         // context.drawImage(img, 50, 50, 100,100, 260, 130, 100, 100);
         
         // 利用getImageData 和 putImageData 绘制图片
//
//         context.drawImage(img, 10, 10);
//         // 从画板上获取像素数据
//         // 开始位置， 结束位置
//         var imgData = context.getImageData(50,50,100,100);
//         // 将数据画到画板指定位置坐标
//         context.putImageData(imgData,10,260);
//         // 将所去的像素数据一部分，画到画板上
//         context.putImageData(imgData,200,260,50,50,100,100);   
         
         // createImageData 创建像素
          var imgData = context.getImageData(50,50,200,200);
          // 创建指定大小的空对象
          var imgData01 = context.createImageData(imgData);
          
          for (i = 0; i < imgData01.width * imgData01.height * 4; i+=4) {
              // 红色像素
              imgData01.data[i + 0] = 255;
              imgData01.data[i+1] = 0;
              imgData01.data[i+2] = 0;
              imgData01.data[i+3] = 255;
              
          }
          context.putImageData(imgData01, 10, 260);
     }
}

转载于:https://my.oschina.net/wangdk/blog/125123