如何使用JavaScript在画布上绘图？

Fabric.js

JSFiddle - 演示

线的宽度可以用canvas.freeDrawingBrush.width.

线条的颜色可以用canvas.freeDrawingBrush.color.

此解决方案适用于:

台式电脑:

Chrome 33

Firefox 28

触控设备:

Nexus 4上的Chrome 34

Nexus 4上的Opera 20

Nexus 4上的Firefox 28

进出口

只能通过序列化完整的画布来实现,请参阅教程

线条平滑

是自动完成的,似乎无法停用它.

简单的JavaScript

简单的例子

的jsfiddle

线的宽度可以用context.lineWidth.

线条的颜色可以用strokeStyle.

此解决方案适用于:

台式电脑:

Chrome 33

Firefox 28

触控设备:

Nexus 4上的Firefox 28

它不起作用

触控设备:

Nexus 4上的Chrome 34/Opera 20(见问题)

进出口

导入和导出图像可以通过导入/导出完成clickX,clickY和clickDrag.

线条平滑

最终可以通过替换来实现lineTo()与bezierCurveTo()