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():该方法用于初始化所需要的鼠标事