使用鼠标在HTML5 Canvas上绘图

Question

使用鼠标在HTML5 Canvas上绘图我想使用鼠标在HTML Canvas上绘图（例如：绘制签名，绘制名称，......）请帮帮我怎么办？请提供一些源代码。谢谢

Answer 1

以下是使用canvas创建绘图应用程序的最直接方法：

1. 将a mousedown，mousemove和mouseup事件侦听器附加到画布DOM

2. 在mousedown，获取鼠标坐标，并使用该moveTo()方法定位绘图光标和beginPath()方法以开始新的绘图路径。

3. on mousemove，不断向路径添加新点lineTo()，并使用最后一个段着色stroke()。

4. 在mouseup，设置标志以禁用绘图。

从那里，您可以添加各种其他功能，例如让用户能够选择线条粗细，颜色，笔触甚至图层。