利用canvas 的putImageData和getImageData 写了个文字环绕跑马灯效果
效果：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;}</style></head><body><canvas height="300" width="500" id="PT"></canvas></body><script>let ptDom = document.getElementById('PT');let ctx = ptDom.getContext('2d');let imageData = {};ctx.fillStyle= '#000';ctx.fillRect(0,0,ptDom.width,ptDom.height);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(){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] = random();imageData.data[i+1] = random();imageData.data[i+2] = random();}}ctx.putImageData(imageData,0,0);}drawText();imageData= getData();setInterval(function () {drawParticle();},100)</script></html>
getImageData 获取到的是画布的像素集合imageData，其中Uint8ClampedArray数组中4个元素为一个像素点的颜色描述，第一个是R，第二个是G，第三个是B，第四个是A，取值是0-255八进制，循环修改像素点的颜色以达到想要的效果，然后用putImageData重新填充画布。
如果觉得《canvas 文字灯光环绕粒子闪烁效果 简单实例》对你有帮助，请点赞、收藏，并留下你的观点哦！
