如何在此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);

您可能最好先創建一個生日蛋糕的圖像，然后繪制該圖像：