AmazingCounters.com

[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";

 

posted @ 2015-10-23 23:26  philippica  阅读(972)  评论(0编辑  收藏  举报