如何在此JavaScript动画中使用随机字母？

Question

我正在制作此动画 ，当将鼠标悬停在文本上时，它会以精美的方式进行动画处理。

但是我想改变这个动画。 我想使用随机字符代替圆圈， 例如Unicode生日蛋糕符号 。

问题是我在bubbles.js文件中的任何地方都找不到circle的定义，看起来circle是在jQuery文件中的某个位置定义的。

Answer 1

在Bubbles.js中，形状是在以直线开头的函数中绘制的：

this.draw = function (bubbleShape, dx, dy) {

这是一篇文章 ，显示了如何添加三角形和心形。

如果要绘制字符，则必须引用支持该字符的字体，并且浏览器必须具有该字体。

您可以尝试：

ctx.fillStyle = this.color;
ctx.font = '40pt Symbola';
ctx.fillText('🎂', this.curPos.x + dx, this.curPos.y + dy);

您可能最好先创建一个生日蛋糕的图像，然后绘制该图像：