网站开发遇到的难题好的产品设计网站

将createFireworks方法改造如下

function createFireworks(x,y,text=“”){

if(text!=“”){

//绘制文字

}else{

//原有的烟花代码

}

}

传递一个text参数，当此参数不为空时，我们进入文字烟花的绘制逻辑。

var fontSize = 120;

var textHeight = fontSize;

context.font=fontSize+“px Verdana”;

context.fillStyle = “#ffffff”;

context.fillText(text,0,textHeight);

获取点阵数组

======

这样我们就能把字绘制在画布上了，接着我们使用getImageData来获得并裁剪点阵信息，因为我们只要一部分的点阵。

var imgData = textctx.getImageData(0,0,textWidth,textHeight);

for (var h = 0; h < textHeight; h+=gap) {

for(var w = 0; w < textWidth; w+=gap){

var position = (text