[英]How to use a random letter in this JavaScript animation?
I am working on this animation , where when hovering over the text, it animates in a beautiful manner. 我正在制作此动画 ,当将鼠标悬停在文本上时,它会以精美的方式进行动画处理。
But I want a change in this animation. 但是我想改变这个动画。 I want to use a random character instead of circle eg a unicode birthday cake symbol .
我想使用随机字符代替圆圈, 例如Unicode生日蛋糕符号 。
The problem is I can't find the definition of circle
anywhere in the bubbles.js
file, looks like it circle
is defined somewhere inside jQuery file. 问题是我在
bubbles.js
文件中的任何地方都找不到circle
的定义,看起来circle
是在jQuery文件中的某个位置定义的。
In bubbles.js, the shapes are drawn in the function that starts with the line: 在Bubbles.js中,形状是在以直线开头的函数中绘制的:
this.draw = function (bubbleShape, dx, dy) {
Here is an article that shows how to add triangles and hearts. 这是一篇文章 ,显示了如何添加三角形和心形。
If you want to draw a character, you have to reference a font that supports that character, and the browser would have to have that font. 如果要绘制字符,则必须引用支持该字符的字体,并且浏览器必须具有该字体。
You could try: 您可以尝试:
ctx.fillStyle = this.color;
ctx.font = '40pt Symbola';
ctx.fillText('🎂', this.curPos.x + dx, this.curPos.y + dy);
You might be better off creating an image of a birthday cake, and then drawing the image: 您可能最好先创建一个生日蛋糕的图像,然后绘制该图像:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.