<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title></title> <script type="text/javascript"> window.onload = function () { var cancans = document.getElementById("myCanvas"); //得到2D渲染上下文 var context = document.getElementById("myCanvas").getContext("2d"); var imageData = context.createImageData(200, 200); var pixels = imageData.data; var numPixels = imageData.height * imageData.width; for (var i = 0; i < numPixels; i++) { pixels[i * 4] = 255; pixels[i * 4 + 1] = 0; pixels[i * 4 + 2] = 0; pixels[i * 4 + 3] = 255; } context.putImageData(imageData, 0, 0); //随机图片 for (i = 0; i < numPixels; i++) { pixels[i * 4] = Math.floor(Math.random() * 255); pixels[i * 4 + 1] = Math.floor(Math.random() * 255); pixels[i * 4 + 2] = Math.floor(Math.random() * 255); pixels[i * 4 + 3] = Math.floor(Math.random() * 255); } context.putImageData(imageData, 200, 0); for (var x = 0; x < imageData.width; x++) { for (var y = 0; y < imageData.height; y++) { pixelRed = x * imageData.width * 4 + y * 4; pixelGreen = pixelRed + 1; pixelBlue = pixelRed + 2; pixelAlpha = pixelRed + 3; if (x < 100 && y < 100) { pixels[pixelRed] = 255; pixels[pixelGreen] = 0; pixels[pixelBlue] = 0; pixels[pixelAlpha] = 255; } else { pixels[pixelRed] = 0; pixels[pixelGreen] = 255; pixels[pixelBlue] = 0; pixels[pixelAlpha] = 255; } } } //后4个参数分别是，imagedata画上去时的原点坐标dx,dy，宽度，长度 //后面的dx,dy是相对前2个参数x,y的偏移，图形会偏移 //就是实际画的位置是(x+dx,y+dy) context.putImageData(imageData, 0, 200, 50, 0, 100, 100); //马赛克效果 var img2 = new Image(); img2.src = "images/wsj.jpg"; img2.onload = function () { context.drawImage(img2, 0, 0, img2.width, img2.height, 200, 200, 200, 200); var imagedata = context.getImageData(200, 200, 200, 200); pdata = imagedata.data; var numTilerows = 9;//行色块个数 var numTilecols = 9;//列色块个数 var tileWitdh = Math.floor(imagedata.width / numTilecols); var tileHight = Math.floor(imagedata.height / numTilerows); for (var i = 0; i < numTilerows; i++) { for (var j = 0; j < numTilecols; j++) { var tempData = context.getImageData(200 + j * tileWitdh, 200 + i * tileHight, 1, 1).data; var pR = tempData[0]; var pG = tempData[1]; var pB = tempData[2]; var pA = tempData[3]; var pixelColor = "rgba(" + pR + "," + pG + "," + pB + "," + pA + ")"; context.fillStyle = pixelColor; context.fillRect(200 + j * tileWitdh, 200 + i * tileHight, tileWitdh, tileHight); //也可以先操作图片的每个像素，最后画到画布里 // for (var tr = 0; tr < tileHight; tr++) { // for (var td = 0; td < tileWitdh; td++) { // var t = (i * tileHight + tr) * 4 * imagedata.width + (j * tileWitdh + td) * 4; // pdata[t] = pR; // pdata[t + 1] = pG; // pdata[t + 2] = pB; // pdata[t + 3] = pA; // } // } } } // context.putImageData(imagedata, 200, 200, 200, 200); } }; </script> </head> <body> <canvas id="myCanvas" height="500px" width="500px" style="border:1px black solid"> </canvas> </body> </html>