<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; } </style> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <canvas height="300" width="500" id="PT"></canvas> </body> <script> let ptDom = document.getElementById('PT'); ctx = ptDom.getContext('2d'); // let imageData = {}; // ctx.fillStyle = '#000'; // ctx.fillRect(0, 0, ptDom.width, ptDom.height); var img = new Image() img.src = "./girl.jpg" img.onload = imgfn;//图片加载完在执行 function imgfn() { ctx.drawImage(img, 0, 0) imageData = getData(); setInterval(function () { drawParticle(); }, 1000) } function drawText() { ctx.fillStyle = '#000'; ctx.strokeStyle = '#fff'; ctx.font = '50px Verdana'; ctx.strokeText('Hello world', 80, 80); ctx.save(); } function random() { return Math.random() * 255; } function getData() { return ctx.getImageData(0, 0, 500, 300); } function drawParticle() { console.log(imageData.data) for (let i = 0; i < imageData.data.length; i += 4) { let r = imageData.data[i]; let g = imageData.data[i + 1]; let b = imageData.data[i + 2]; if (r || g || b) { imageData.data[i + 3] = 10; } } ctx.putImageData(imageData, 0, 0); } drawText(); </script> </html>