[canvas入坑0] Jquery + HTML5 做最简易的画板
查看效果请到 http://philippica.github.io/ 点击paint
嗯,心血来潮想做个东西的一部分
html部分不用多说了,重点就是一个canvas
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>foo</title> 5 <meta charset = "utf-8"> 6 <script type = "text/javascript" src="jquery.js"></script> 7 <style> 8 *{margin:0 ; padding : 0;} 9 html, body{background-color : black; height : 100%;width: 100%;} 10 </style> 11 </head> 12 <body> 13 <canvas id = "myCanvas" width = "1000" height = "600"></canvas> 14 <script type = "text/javascript" src= "pp.js"></script> 15 </body> 16 </html>
嘛把背景设成黑色只是我的恶趣味
关键就在Js部分
首先最关键的三个事件
1.鼠标按下(开始画线)
2.鼠标移动(如果鼠标处于按下状态画线)
3.鼠标松开(停止画线)
此外还有两个事件,即当鼠标移出canvas的时候，和进入canvas的时候,这是两个细节,下面再说
画线采用多条直线拼接的方式画曲线
首先确定一个bool变量ppMousePressed 表示鼠标此时是否按下,ppPointArray记录下每个点的位置,方便以后做进一步的包括撤销等命令
1 var ppPoint = function(x, y) 2 { 3 this.x = x; 4 this.y = y; 5 } 6 7 var ppPointArray = new Array(); 8 var ppMousePressed;
9 var context = document.getElementById('myCanvas').getContext("2d");
当鼠标按下时除了要设置ppMousePressed，还要记录画的第一个点，注意松开鼠标这一事件应该是整个窗口的而不仅仅是canvas
$('#myCanvas').mousedown(function(e)
{
if(e.which == 1)// 如果是左键
{
ppMousePressed = true;
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
ppPointArray.push(new ppPoint(mouseX, mouseY)); //记录路径的第一个点
}
});
$(window).mouseup(function(e){
ppMousePressed = false;
});
当鼠标移动的时候，如果鼠标按下,那么画线
1 $('#myCanvas').mousemove(function(e) 2 { 3 if(ppMousePressed) 4 { 5 var mouseX = e.pageX - this.offsetLeft; 6 var mouseY = e.pageY - this.offsetTop; 7 ppDrawLine(mouseX, mouseY); 8 } 9 });
画线ppDrawLine函数只要向数组中上一个点连线即可,并向数组插入新的点
1 function ppDrawLine(curX, curY) 2 { 3 context.beginPath(); 4 var ppLastPoint = ppPointArray[ppPointArray.length - 1]; 5 context.moveTo(ppLastPoint.x, ppLastPoint.y); 6 context.lineTo(curX, curY); 7 context.closePath(); 8 context.stroke(); 9 ppPointArray.push(new ppPoint(curX, curY)); 10 }
到这里画板的功能大体能用了,但是发现当鼠标移出canvas后再回到canvas会向刚才离开的那个点连线,一个好的方法是当鼠标移入的时候新加一个点为鼠标移入的位置：
1 $('#myCanvas').mouseenter(function(e){ 2 var mouseX = e.pageX - this.offsetLeft; 3 var mouseY = e.pageY - this.offsetTop; 4 ppPointArray.push(new ppPoint(mouseX, mouseY)); 5 });
另一个问题是当鼠标移出过快时线在移出canvas的地方会有不完整,这是由于mousemove反应过来时你已经移出canvas了,可行的方法是当移出的时候强制在移出位置和上一个点连线
1 $('#myCanvas').mouseleave(function(e){ 2 if(ppMousePressed) 3 { 4 var mouseX = e.pageX - this.offsetLeft; 5 var mouseY = e.pageY - this.offsetTop; 6 ppDrawLine(mouseX, mouseY); 7 } 8 });
这样就很完美了，为了让曲线更加光滑 可以设置 context.lineJoin = "round";
