代码
<canvas id="mycanv" width="760" height="200" style="border: 1px solid tan; border-radius: 6px;"></canvas>
<script>
var skip = 4;
var text = '花潮論壇風光美';
var ww = mycanv.width, hh = mycanv.height;
var ctx = mycanv.getContext('2d');
//输出文本
ctx.fillStyle = 'yellow';
ctx.font = 'bold 100px sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(text, ww/2, hh/2);
//获取像素信息
var tData = ctx.getImageData(0, 0, ww, hh);
var data = tData.data; //rgba数据
//按间隔设定循环像素集群并随机更改指定像素点颜色构成
for (var j = 0; j < data.length; j += skip) {
if(data[j + 3] > 0) {
data[j] = `${Math.floor(Math.random() * 256)}`;
data[j + 1] = `${Math.floor(Math.random() * 256)}`;
data[j + 2] = `${Math.floor(Math.random() * 256)}`;
data[j + 3] = `${Math.floor(Math.random() * 150 + 100)}`;
}
}
//将更改的数据写回画布
ctx.putImageData(tData, 0, 0);
</script>
|