基于HTML5 画布功能canvas的绘画板：画线、画圆、画矩形、橡皮、改变线条

小灰灰 2022-06-13 07:25 332阅读 0赞

## 写在前面 ##

试看链接： https://yyywwwqqq.coding.me/draw
    项目下载地址：https://coding.net/u/yyywwwqqq/p/draw
    希望您能点个fork 点个关注  点个收藏！
    有问题请留言！

## 代码实现 ##

1.HTML内容  
![页面][SouthEast]  
上面是一个div 800\*600，里面放了两张画布，相同大小，相互覆盖，因为画布默认是透明的，所以你在哪一个画布上绘画，你都可以在屏幕中看到。  
下面是四个ul列表，分别对应工具、颜色、粗细、清空。记得给每一个li选项添加一个class区分。  
以下是body里面的内容：

2.CSS  
写完body里面的内容之后，接下来我们来设置一下样式。  
主要注意的内容有两点：  
1.两张画布要重叠放在一起，所以需要调整一下它们的位置  
2.ul下的li是块级元素，每一个会占一行，让它们在一行展示  
以下是css代码：

body
                { margin: 0px; }
                canvas
                { position: absolute; left: 0px; right: 0px; /*background-color: transparent */ }
                #div1
                { width: 800px; height: 600px; position: relative; border: 1px solid black; }
                #div2
                { width: 800px; height: 36px; border: 1px solid black; background-color:rgb(220,230,244) ; }
                ul
                { background-color: rgb(220,230,244); text-align: center; margin: 0; padding: 0; height: 30px; float: left; margin-left: 14px; margin-right: 14px; }
                ul>li
                { float: left; border: 1px solid gainsboro; width: 40px; line-height: 25px; display: inline-block; height: inherit; }
                button
                { padding: 0px; }
                .red
                { background-color: red; }
                .black
                { background-color: black; }
                .white
                { background-color: white; }
                .blue
                { background-color: blue; }
                .yellow
                { background-color: yellow; }
                .choice
                { border: 3px solid gold; }

3.JS  
说一下我的实现思路，定义三个变量 style、mywidth、mycolor分别代表工具类型、粗细和颜色。所以首先写的是ul下li的点击事件，并且给每一个点击的li添加一个choice类（有一个黑色的粗边框），用来表示其被选状态；  
以下点击事件的代码：

这样就把click事件基本上写完了，下面来实现绘画功能，主要涉及到mousedown mousemove mouseup 三个事件  
说一下我的思路，鼠标点下的时候触发mousedown函数，switch一下style，判断是铅笔还是橡皮，还是矩形或者圆~  
先说铅笔，记录一下mousedown的坐标beginx和beginy，每一次鼠标move的时候，取一下这时候的event.pageX和event.pageY变量，然后在这两点之间画出线，并且修改下一次mousemove画线的起点应该是上一次的终点。也就是说，每次移动的之后都要beginx =event.pageX，beginy =event.pageY  
注意：mousemove事件并不会随着你的鼠标抬起而clear，即使你把他写在了mousedown事件下，所以我用了一个lock，点击的时候lock = true 打开，mouseup的时候，lock = false锁上。后来发现更简单的方法，就是用 bind和unbind方法！

$("#div1").mousedown(function(event){
            beginx =event.pageX;
            beginy =event.pageY;
            console.log("我点下来的时候：",beginx,beginy);
            switch(style)
            {
                //铅笔状态
                case 0:
                    console.log("我选的是铅笔");
                    lock0 = true;
                    //console.log("我点下来的时候：",beginx,beginy);
                    $("#div1").bind('mousemove',function(event){       
                        if(lock0)
                        {           
                            ctx.beginPath();
                            ctx.moveTo(beginx,beginy);
                            ctx.lineTo(event.pageX,event.pageY);
                            ctx.strokeStyle = mycolor;
                            ctx.lineWidth = mywidth;
                            ctx.stroke();
                            beginx =event.pageX;
                            beginy =event.pageY;
                       }
                    })
                    break;
                    }
            }
        })

橡皮的思路和铅笔一样，只不过要把颜色设置成白色固定！

case 3:
                    console.log("我选的是橡皮");
                    lock3 = true;
                    //console.log("我点下来的时候：",beginx,beginy);
                    $("#div1").bind('mousemove',function(event){       
                        if(lock3)
                        {
    
                            ctx.beginPath();
                            ctx.moveTo(beginx,beginy);
                            ctx.lineTo(event.pageX,event.pageY);
                            ctx.strokeStyle = "white";
                            ctx.lineWidth = mywidth*3;
                            ctx.stroke();
                            beginx =event.pageX;
                            beginy =event.pageY;
                         }
                    })
                    break;

然后是画矩形，这时候就用到了声明的第二个画布，我们可以把它看做成一个缓冲区，在mousemove下鼠标每次移动，先清空这个缓冲区，然后画到缓冲区里面一个矩形。mouseup的时候，也清空以下缓冲区，然后在第一张画布里根据位置声明一个一样的矩形。
    代码如下：

case 1:
                    lock1 = true;
                    console.log("画个矩形吧！");
                    $("#div1").bind('mousemove',function(event){                   
                        if(lock1)
                        {
                            ctx2.clearRect(0,0,800,600); 
                            xx=event.pageX-beginx;
                            yy=event.pageY-beginy;
                            ctx2.beginPath();
                            ctx2.rect(beginx,beginy,xx,yy);
                            ctx2.strokeStyle = mycolor;
                            ctx2.lineWidth = mywidth;
                            ctx2.stroke();
                        }
                    })
                    break;

画圆的话，和画矩形局相似了，我就不赘述了。  
下面是画圆的代码：

case 2 :
                    lock2=true;
                    console.log("画个圆吧 ！")
                               $("#div1").bind('mousemove',function(event){        
                        if(lock2)
                        {
                            ctx2.clearRect(0,0,800,600);                    
                            xx=event.pageX-beginx;
                            yy=event.pageY-beginy;
                            r = Math.sqrt(xx*xx+yy*yy)/2;
                            centerx = (event.pageX+beginx)/2;
                            centery = (event.pageY+beginy)/2;
                            console.log(xx,yy,centerx,centery,r);
                            ctx2.beginPath();
                            ctx2.arc(centerx,centery,r,0,2*Math.PI,true);
                            ctx2.strokeStyle = mycolor;
                            ctx.lineWidth = mywidth;
                            ctx2.stroke();
                        }
                    })
                    break;

最后把鼠标抬起的事件贴一下,下面是代码：

$("#div1").mouseup(function(){
            switch(style)
            {
                //铅笔状态
                case 0:
    
                    break;
                //矩形状态
                case 1:
                    ctx2.clearRect(0,0,800,600); 
                    xx=event.pageX-beginx;
                    yy=event.pageY-beginy;
                    ctx.beginPath();
                    ctx.rect(beginx,beginy,xx,yy);
                    ctx.strokeStyle = mycolor;
                    ctx.lineWidth = mywidth;
                    ctx.stroke();
                    break;
                //画圆状态
                case 2:
                    ctx2.clearRect(0,0,800,600); 
                    xx=event.pageX-beginx;
                    yy=event.pageY-beginy;
                    console.log(event.pageX,event.pageY);
                    r = Math.sqrt(xx*xx+yy*yy)/2;
                    centerx = (event.pageX+beginx)/2;
                    centery = (event.pageY+beginy)/2;
                    console.log(xx,yy,centerx,centery,r);
                    ctx.beginPath();
                    ctx.arc(centerx,centery,r,0,2*Math.PI,true);
                    ctx.strokeStyle = mycolor;
                    ctx.lineWidth = mywidth;
                    ctx.stroke();
                    break;
                case 3:
    
                    break;
    
            }
        $("#div1").unbind("mousemove");
        //lock0=false;
        //lock1=false;
        // lock2=false;
        // lock3=false;
        });

[SouthEast]: /images/20220613/b7351e86793e4575aa4e52880e9c6a3f.png