canvas实现pc端画板

最新推荐文章于 2022-05-08 19:15:31 发布

ljp

最新推荐文章于 2022-05-08 19:15:31 发布

阅读量618

点赞数

文章标签： javascript css jquery html5 canvas

本文链接：https://blog.csdn.net/weixin_56131571/article/details/114835913

版权

canvas实现pc端画板

代码下载链接:https://download.csdn.net/download/weixin_56131571/15809020

可以设置线条颜色，以及线条粗细
在这里插入图片描述
html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>drawing Board</title>
    <link rel="stylesheet" href="css/demo.css">

</head>
<body>

    <div class="wrapper">
        <canvas class="cavs" width="700px" height="500px"></canvas>
        <ul class="btn-list">
            <li><input id="colorBoard" type="color" value="colorBoard"></li>
            <li><input id="cleanBoard" type="button" value="清屏"></li>
            <li><input id="eraser" type="button" value="橡皮"></li>
            <li><input id="rescind" type="button" value="撤销"></li>
            <li><input id="lineRuler" type="range" value="线条" min="1" max="30"></li>
        </ul>
    </div>
    <script src="js/jquery-2.0.3.js"></script>
    <script src="js/demo.js"></script>
</body>
</html>

css代码

*{
    margin:0;
    padding: 0;
    list-style: none;
}
body{
    background: url(../images/bg.jpg) 0 0 no-repeat;
    background-size: cover;
}
.wrapper{
    width: 800px;
    margin: 15px auto;
}
.wrapper canvas{
    background-color: #fff;
    border: 1px solid royalblue;
    border-radius: 25px;
    box-shadow: 10px 10px 5px #888888;
    margin-bottom: 20px;
}
.wrapper .btn-list{
    width: 800px;
   
}
.wrapper .btn-list li{
    display: inline-block;
    margin-left: 30px;
}
.wrapper .btn-list li input{
    display: block;
    background:yellow;
    color: #000;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 25px;
    font-size: 20px;
    /* transition-duration:0.2s; */
}
.wrapper .btn-list li input:hover{
    border: 1px solid rebeccapurple;
    box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.3);
}

js代码

/**
 * drawing Board nan.xue
 */
var drawingLineObj={
    cavs:$('.cavs').get(0),
    context:$('.cavs').get(0).getContext('2d'),
    colorBoard:$('#colorBoard').get(0),
    cleanBoard:$('#cleanBoard'),
    eraser:$('#eraser'),
    rescind:$('#rescind'),
    lineRuler:$('#lineRuler').get(0),
    boolean:false,
    imgArr:[],
    init:function(){
        this.context.lineCap='round';//线条的起始样式
        this.context.lineJion='round';//转弯
        this.draw();
        this.btnAllfn();
    },
    btnAllfn:function(){
        var self=this;
        this.colorBoard.onchange=function(){
            console.log(this.value);
            self.context.strokeStyle=this.value;
        };
        this.lineRuler.onchange=function(){
            self.context.lineWidth=this.value;
        };

        var btnUlNode=$('.btn-list').get(0);
        console.log(btnUlNode);
        btnUlNode.onclick=function(e){
            console.log(e.target.id);
            switch(e.target.id){

                case "cleanBoard":
                    self.context.clearRect(0,0,self.cavs.offsetWidth,self.cavs.offsetHeight);                   break;
                case "eraser":
                    self.context.strokeStyle="#fff";
                    break;
                case "rescind":
                    if(self.imgArr.length>0){
                        self.context.putImageData(self.imgArr.pop(),0,0);
                    }
                    break;
            }


        }
    },
    draw:function(){
        var cavs=this.cavs,
            self=this;
        var c_x=cavs.offsetLeft,
            c_y=cavs.offsetTop;
        cavs.onmousedown=function(e){
            self.boolean=true;
            self.context.beginPath();
            var m_x=e.pageX-c_x,
                m_y=e.pageY-c_y;
            
            var imgData=self.context.getImageData(0,0,self.cavs.offsetWidth,self.cavs.offsetHeight);
            self.imgArr.push(imgData);
           
            self.context.moveTo(m_x,m_y);//鼠标在画布上的触点
            this.onmousemove=function(e){
                if(self.boolean){
                    self.context.lineTo(e.pageX-c_x,e.pageY-c_y);
                    self.context.stroke();
                }
             
            };
            this.onmouseup=function(){
                    self.context.closePath();
                    this.onmousemove=null;
                    self.boolean=false;
            };
            this.onmouseleave=function(){
                self.context.closePath();
                this.onmousemove=null;
                self.boolean=false;
            };
        };
    }
}
drawingLineObj.init();