HTML Canvas 鼠标画图

发布时间：2011-09-21 作者：admin 来源：未知

原文来自: (已被墙) 译文: 我也不打算全部翻译了大部分也看的懂,就算看不懂,代码也…

 原文来自:(已被墙)

译文: 

我也不打算全部翻译了…大部分也看的懂,就算看不懂,代码也能看懂….o(╯□╰)o原谅我非常懒…很久没写博客了.

——————-以下是一个简单的例子————————————-

html容器

首先，准备个容器,也就是画板了。

XML/HTML Code复制内容到剪贴板

但是，由于IE部分版本还是不支持HTML5，那我们可以借用exCanvas兼容IE..

XML/HTML Code复制内容到剪贴板

初始化js代码

如果你不管IE使用第一种方法

JavaScript Code复制内容到剪贴板

为了兼容IE，不得不使用下面这个方法，创建一个canvas，然后使用excanvas初始化。当然，为了IE兼容，你需要针对IE加上exCanvas.js

JavaScript Code复制内容到剪贴板

开始一个简单的画板

在开始之前，说说怎么做先。它包含了四个鼠标事件和两个方法。addClick是为了记录鼠标的移动点，redraw是把记录的数据画出来。 (提一下，由于原作者使用了jquery，所以你也要把jquery引用进来。)

鼠标按下事件(Mouse Down Event)

当鼠标按下时，把paint设为true，表示正在画，鼠标没松开。把鼠标点记录下来。

JavaScript Code复制内容到剪贴板

鼠标移动事件(Mouse Move Event)

当按下鼠标的时候，鼠标移动就把点记录下来并画出来。

JavaScript Code复制内容到剪贴板

鼠标松开事件(Mouse Up Event)

JavaScript Code复制内容到剪贴板

鼠标移开事件(Mouse Leave Event)

JavaScript Code复制内容到剪贴板

addClick方法

记录鼠标坐标点

JavaScript Code复制内容到剪贴板

redraw方法

目前这个redraw方法是每次都清空画板，然后重新把所有的点都画过，虽然效率不高，但是这样看起来还是挺简单的。

JavaScript Code复制内容到剪贴板

最终效果 最后

这上面的只是个简单的例子啦。。。原作者还在上面代码的基础上加了颜色，大小，橡皮擦等功能呢~~想看的翻墙去看作者博客吧。。这年头不会翻墙还真不好意思见人。

 

你可能喜欢阅读以下文章 【责任编辑：admin】

>

数据统计中！！

上一篇：html5-Canvas绘图
下一篇：HTML5 Canvas简易时钟
返回Canvas