我也不打算全部翻译了…大部分也看的懂,就算看不懂,代码也能看懂….o(╯□╰)o原谅我非常懒…很久没写博客了.
——————-以下是一个简单的例子————————————-
html容器
首先,准备个容器,也就是画板了。
<canvas id="canvasInAPerfectWorld" width="490" height="220"></canvas> |
但是,由于IE部分版本还是不支持HTML5,那我们可以借用exCanvas兼容IE..
<div id="canvasDiv"></div> |
初始化js代码
如果你不管IE使用第一种方法
context = document.getElementById('canvasInAPerfectWorld').getContext("2d"); |
为了兼容IE,不得不使用下面这个方法,创建一个canvas,然后使用excanvas初始化。当然,为了IE兼容,你需要针对IE加上exCanvas.js
var canvasDiv = document.getElementById('canvasDiv'); |
开始一个简单的画板
在开始之前,说说怎么做先。它包含了四个鼠标事件和两个方法。addClick是为了记录鼠标的移动点,redraw是把记录的数据画出来。 (提一下,由于原作者使用了jquery,所以你也要把jquery引用进来。)
鼠标按下事件(Mouse Down Event)
当鼠标按下时,把paint设为true,表示正在画,鼠标没松开。把鼠标点记录下来。
$('#canvas').mousedown(function(e){ |
鼠标移动事件(Mouse Move Event)
当按下鼠标的时候,鼠标移动就把点记录下来并画出来。
$('#canvas').mousemove(function(e){ |
鼠标松开事件(Mouse Up Event)
$('#canvas').mouseup(function(e){ |
鼠标移开事件(Mouse Leave Event)
$('#canvas').mouseleave(function(e){ |
addClick方法
记录鼠标坐标点
var clickX = new Array(); |
redraw方法
目前这个redraw方法是每次都清空画板,然后重新把所有的点都画过,虽然效率不高,但是这样看起来还是挺简单的。
function redraw(){ |
最后
这上面的只是个简单的例子啦。。。原作者还在上面代码的基础上加了颜色,大小,橡皮擦等功能呢~~想看的FQ去看作者博客吧。。这年头不会FQ还真不好意思见人。