二、分享jQuery+Canvas实现的手写留言板
[文章作者：磨延城 转载请注明原文出处： https://mo2g.com/view/135/ ]
上一篇文章《一、分享jQuery+Canvas实现的手写留言板》介绍了手写画板的4个基本步骤,这里再跟大家回顾一下： 1）moveTo(x,y)：设定新路径的起始坐标——落笔 2）lineTo(x,y)：根据两个点坐标建立直线,并保存到路径中——动笔 3）closePath()：关闭当前打开的路径——抬笔 4）stroke()：渲染并显示所有的路径——大功告成
上一篇文章《一、分享jQuery+Canvas实现的手写留言板》介绍了手写画板的4个基本步骤，这里再跟大家回顾一下：
1）moveTo(x,y)：设定新路径的起始坐标——落笔
2）lineTo(x,y)：根据两个点坐标建立直线，并保存到路径中——动笔
3）closePath()：关闭当前打开的路径——抬笔
4）stroke()：渲染并显示所有的路径——大功告成
接下来我们继续完善画板，根据上述的4个基本步骤，实现通过鼠标，来模拟使用毛笔进行写字。
1）落笔：点击鼠标左键
2）动笔：按住鼠标左键不放并移动鼠标
3）抬笔：释放鼠标左键
4）为了实时显示效果，每一次动笔，立刻把路径渲染显示出来
这里，我们通过jQuery的4个函数监控鼠标的按下、移动还有释放操作。
mousedown()：鼠标在元素上点击后会触发。
mousemove()：鼠标在元素上移动来触发，该函数还会传递一个变量——事件对象，其.clientX 和 .clientY 属性代表鼠标的坐标。
mouseup()：在鼠标点击对象释放时触发。
mouseleave()：在鼠标移出对象时触发。
基于jQuery的函数，实现如下代码。
<!DOCTYPE html>
<html>
<head>
<title>磨途歌画板测试</title>
</head>
<body>
<canvas id="can" width="800" height="600" style="border:1px solid black">Canvas画板</canvas>
<script src="http://cdn.staticfile.org/jquery/1.7.2/jquery.min.js"></script>
<script>
var canvas = $('#can'),//获取canvas元素
pan = canvas[0].getContext("2d"),//获取2D图像API接口
paint = false,//鼠标左键是否在画板区域按下
x,
y;
pan.strokeStyle = "#000000";//设置画笔颜色
pan.lineJoin = "round";//设置画笔轨迹基于圆点拼接
pan.lineWidth = 9;//设置画笔粗细
//监控画板上的鼠标左键按下
canvas.mousedown(function(e){
paint = true;
x = e.offsetX;
y = e.offsetY;
pan.beginPath();
pan.moveTo(x,y);
});
//移动鼠标
canvas.mousemove(function(e){
if(paint) {
var nx = e.offsetX,
ny = e.offsetY;
pan.lineTo(x, y);
pan.stroke();
x = nx;
y = ny;
}
});
//释放鼠标左键
canvas.mouseup(function(e){
paint = false;
});
//鼠标离开画板
canvas.mouseleave(function(e){
paint = false;
});
</script>
</body>
</html>上述代码可以正常在谷歌浏览器运行，但是火狐浏览器就不起作用，为什么？原因就在于火狐浏览器不支持通过e.offsetX、e.offset这种方式获取鼠标坐标。所以我们需要通过别的方式，实现获取鼠标坐标的功能。
//解决火狐浏览器不支持e.offsetX
function getOffset(e) {
var target = e.target;
if (target.offsetLeft == undefined){
target = target.parentNode;
}
var pageCoord = getPageCoord(target);
//计算鼠标位置（触发元素与窗口的距离）
var eventCoord = {
x : window.pageXOffset + e.clientX,
y : window.pageYOffset + e.clientY
};
var offset = {
offsetX: eventCoord.x - pageCoord.x,
offsetY: eventCoord.y - pageCoord.y
};
return offset;
}
//计算从触发到root间所有元素的offsetLeft值之和。
function getPageCoord(element) {
var coord = {x: 0, y: 0};
while (element) {
coord.x += element.offsetLeft;
coord.y += element.offsetTop;
element = element.offsetParent;
}
return coord;
}当我们需要获取鼠标坐标的时候，就通过如下方式获取即可。
var x = (e.offsetX == undefined) ? getOffset(e).offsetX : e.offsetX, y = (e.offsetY == undefined) ? getOffset(e).offsetY : e.offsetY;
至于画板的橡皮擦功能等其他功能，有时间再补充了。
我来说两句: