Html5开发的在线画板涂鸦,使用html5 canvas制作涂鸦画板

HTML5的canvas元素是HTML5新特性中最有用的元素之一。通过html5 canvas，我们可以做图像处理、绘图、保存、恢复层和渲染图像等等操作，而不用依赖像Adobe Flash player和silverlight之类的外部插件。

在这篇文章中，我们将编写一个Javascript插件来使大家可以在canvas上随意涂写和绘画，就像一块涂鸦画板一样。另外再添加一些额外的小功能，如选择线条的宽度和颜色。

画板的最终效果就像下面这样，尝试在上面用鼠标画画看：

清空画板

Line width : 1

3

5

7

9

11

Color : black

blue

red

green

yellow

gray

HTML代码

我们需要一个用于绘画的canvas元素和一些用于选择操作的下拉框：

清空画板

Line width :

1

3

5

7

9

11

Color :

black

blue

red

green

yellow

gray

JAVASCRIPT

我们的涂鸦画板js脚本主要有三个函数：

InitThis()：该方法用于初始化所需要的鼠标事