二、分享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;

至于画板的橡皮擦功能等其他功能,有时间再补充了。

    评论:

    1. 威客 回复2014年12月31日 14时36分
      磨者
      初次到访,博主好专业呀

    2. gotolnc 回复2015年01月24日 02时51分
      磨者
      好久开放插件呢,不错的功能。

    3. unknown 回复2015年05月31日 04时56分
      磨者
      好文章,内容惟妙惟肖.禁止此消息:nolinkok@163.com
      西门塔尔牛 http://www.xmten.com/

    4. 肉牛 回复2015年06月04日 15时24分
      磨者
      好文章,内容观念明确.禁止此消息:nolinkok@163.com
      肉牛 http://www.xmten.com/

    5. unknown 回复2015年06月05日 22时48分
      磨者
      不错的文章,内容气贯长虹.禁止此消息:nolinkok@163.com
      肉牛 http://www.xmten.com/

    6. 磨者 977 回复2017年12月04日 21时56分
      磨者
      data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcoAAACzCAYAAAAJxlxhAAAewElEQVR4Xu2de7BdVX3Hv79zE3lIABEqER+8oRLkLaBopIKvkYK5+5Cz94no+MftdKrTUhntjLReWp22lqod2unMteNUzFn7JGffAMXxMUAxJBAgPCUoAS0YHtHhoRIIYLjn19n3nkNOws295+y13+e7Z5yRuev3W+v3+a3s71lrr4eADwmQAAmQAAmQwB4JCNmQAAmQAAmQAAnsmQCFkr2DBEiABEiABOYgQKFk9yABEiABEiABCiX7AAmQAAmQAAlEI8ARZTRutCIBEiABEhgSAhTKIUk0wyQBEiABEohGgEIZjRutSIAESIAEhoQAhXJIEs0wSYAESIAEohGgUEbjRisSIAESIIEhIUChHJJEM0wSIAESIIFoBCiU0bjRigRIgARIYEgIUCiHJNEMkwRIgARIIBoBCmU0brQiARIgARIYEgIUyiFJNMMkARIgARKIRoBCGY0brUiABEiABIaEAIVySBLNMEmABEiABKIRoFBG40YrEiABEiCBISFAoRySRDNMEiABEiCBaAQolNG40YoESIAESGBICFAohyTRDJMESIAESCAaAQrlgNxc17k5NPH94NwBTVmcBEiABEiggAQolAMmLRRKgZ6skPsolgPCY3ESIAESKCABCmWEpHFUGQEaTUiABEigoAQolBESR6GMAI0mJEACJFBQAhTKCImjUEaARhMSIAESKCgBCmWExFEoI0CjCQmQAAkUlACFMkLiOkJ5jO8Hb4tgThMSIAESIIECEaBQRkiWVxu9ClKpGb91SARzmpAACZAACRSIAIUyYrI815lS6EW+P3l9RBc0IwESIAESKAABCmXEJLmuc3to6vvBWRFd0IwESIAESKAABCiUEZPkuqMXCORa4wcjEV3QjARIgARIoAAEKJQWSfLc6tPQdtM0Jz9v4YamJEACJEACOSZAobRIjltznoDgER5lZwGRpiRAAiSQcwIUSosEcT+lBTyakgAJkEBBCFAoLRJFobSAR1MSIAESKAgBCqVFoiiUFvBoSgIkQAIFIUChtEgUhdICHk1JgARIoCAEKJQWiaJQWsCjKQmQAAkUhACF0iJRFEoLeDQlARIggYIQoFBaJIpCaQGPpiRAAiRQEAIUSotEUSgt4NGUBEiABApCgEJpkSgKpQU8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

    7. 我来说两句:

        切换  

      磨途歌检测发现,您当前使用的浏览器版本过低,要想使用画板模式,请先更新浏览器

        切换  

      磨途歌随机验证码