效果图：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Canvas</title> 8 <style> 9 canvas { 10 margin: 0 auto; 11 border: 1px solid #aaa; 12 display: block; 13 } 14 </style> 15 </head> 16 <body> 17 <canvas width="500px" height="500px" id="canvas"></canvas> 18 19 <script> 20 var canvas = document.querySelector("#canvas"); 21 var ctx = canvas.getContext("2d"); 22 23 /* 24 ctx.getImageData(x, y, width, height) 返回数组 25 R - 红色 (0 - 255) 26 G - 绿色 (0 - 255) 27 B - 蓝色 (0 - 255) 28 A - alpha (0 - 255) 0 透明，255不透明 29 30 var img = new Image(); 31 img.src = "./1.jpeg"; 32 img.onload = () => { 33 ctx.drawImage(img, 0, 0, 200, 200); 34 var copy = ctx.getImageData(40, 20, 50, 50); 35 ctx.putImageData(copy, 0, 300); 36 }; 37 */ 38 39 var w = canvas.width; 40 var h = canvas.height; 41 42 function drawCircle(x, y, r, color) { 43 ctx.beginPath(); 44 ctx.arc(x, y, r, 0, Math.PI * 2); 45 ctx.fillStyle = color || "#000"; 46 ctx.fill(); 47 } 48 49 function drawText(text, x, y) { 50 ctx.font = "300px 微软雅黑"; 51 ctx.textAlign = "center"; 52 ctx.textBaseline = "middle"; 53 ctx.fillText(text, x, y, w); 54 } 55 56 // step_01 画文字 57 drawText("❤", w / 2, h / 2); 58 59 // step_02 获取像素点 60 var copy = ctx.getImageData(0, 0, w, h); 61 62 // step_03 清除画布 63 ctx.clearRect(0, 0, w, h); 64 65 // step_04 筛选有效像素点 66 var leap = 3; 67 for (var y = 0; y < h; y += leap) { 68 for (var x = 0; x < w; x += leap) { 69 var index = x + y * w; // 公式 70 var a = copy.data[index * 4 + 3]; 71 if (a > 128) { 72 // step_05 画圆 73 drawCircle(x, y, 1, "#f00") 74 } 75 } 76 } 77 </script> 78 </body> 79 80 </html>