html - HTML5 Canvas 用鼠标操作字母

Question

我是 HTML5 Canvas 的新手，因为我对它的经验很少。我想要完成的是大约 50 个字母 D，不同的大小和颜色在屏幕上移动。当用户用鼠标靠近这些字母时，我希望这些字母加速并四处移动。有人有这方面的好教程吗？

Answer 1

您对这些 javascript 概念感到满意吗？

• 数组，
• 对象，
• 事件处理程序，
• 计时器，
• 原型设计，
• 伪类

如果您对这些 javascript 概念感到满意，请查看此演示：

启动演示，然后按住鼠标创建“粒子”。

粒子将被鼠标接近击退。

http://soofw.com/demos/fountains/

它适用于圆形“球”对象，但您可以修改代码以绘制 D：

Ball.prototype.draw=function() {
    surface.context.font = this.font;  // add the font property to the Ball class
    surface.context.fillStyle = this.color.v
    surface.context.fillText("D",this.x,this.y);
}

等等...

如果您对代码不满意，请按照@Vincent Piel 的建议进行操作：google = html canvas library。