1 function draw(id){ 2 var canvas = document.getElementById(id); 3 if(canvas.getContext == null){ 4 return false; 5 } 6 var context = canvas.getContext("2d"); 7 var img = new Image(); 8 img.src = "heng.jpg"; 9 img.onload = function(){ 10 context.drawImage(img,0,0,500,500); 11 var imageData = context.getImageData(0,0,canvas.width,canvas.height); 12 var pixels = imageData.data; 13 14 context.clearRect(0,0,canvas.width,canvas.height); 15 16 var numTileRows = 100; 17 var numTileCols = 100; 18 19 var tileWidth = imageData.width/numTileCols; 20 var tileHeight = imageData.height/numTileRows; 21 22 for(var r = 0; r < numTileRows; r++){ 23 for(var c = 0; c < numTileCols; c++){ 24 // 取每个小块的中心点坐标 25 var x = (c * tileWidth) + tileWidth/2; 26 var y = (r * tileHeight) + tileHeight/2; 27 28 var pos = Math.floor(y) * imageData.width * 4 + Math.floor(x) * 4; 29 var red = pixels[pos]; 30 var green = pixels[pos+1]; 31 var blue = pixels[pos+2]; 32 context.fillStyle = "rgb(" + red + " ," + green + "," + blue +")"; 33 context.fillRect(x - (tileWidth/2),y - (tileHeight/2), tileWidth,tileHeight ); 34 } 35 } 36 37 }; 38 } 39 draw("myCanvas");