一波HTML5 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);