canvas实现画板

canvas实现画板

主要用到知识点：

• 鼠标事件onmousedown() onmousemove() onmouseup() onmouseleave()
• 事件委托

• canvas的一些方法 如：绘制线条moveto() lineto() stroke() 撤销功能getimagedata() putimagedata()

  实现的功能

• 铅笔 橡皮擦 更换颜色 改变线条粗细 清屏 撤销 以及保存功能

• 直接看效果

html：

   <div class="wraper">
        <canvas class="canvas" width="1000" height="500"></canvas>
        <ul class="btn-list">
            <li><input type="color" class="colorboard" value="#000000"></li>
            <li><input type="button" class="clearboard" value="清屏"></li>
            <li><input type="button" class="pencil" value="铅笔"></li>
            <li><input type="button" class="eraser" value="橡皮擦"></li>
            <li><input type="button" class="repeal" value="撤销"></li>
            <li><input type="button" class="save" value="保存"></li>
            <li><input type="range" class="rangeboard" value="1" min="1" max="30"></li>
        </ul>
        <span class="icon pencil-class"></span>
    </div>

css：

    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    html,
    body {
        width: 100%;
        height: 100%;
        background: url('../img/bg_board.jpg') no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .wraper {
        width: 1200px;
        position: relative;
    }
    .wraper .canvas {
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 10px;
        box-shadow: 10px 10px 12px rgba(0, 0, 0, 0.5);
    }
    .wraper .icon {
        position: absolute;
        left: 0;
        top: 0;
        width: 20px;
        height: 20px;
        display: none;
        z-index: 9998;
        pointer-events: none;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .wraper .pencil-class {
        background-image: url('../img/pencil.png');
    }
    .wraper .eraser-class {
        background-image: url('../img/eraser.png');
    }
    .wraper .btn-list {
        width: 1000px;
        text-align: center;
        margin-top: 10px;
    }
    .wraper .btn-list li {
        display: inline-block;
        margin: 10px;
    }
    .wraper .btn-list li input {
        padding: 10px 15px;
        background: yellow;
        color: #000;
        border-radius: 10px;
        font-size: 15px;
        cursor: pointer;
        border: none;
        outline: none;
        border: 1px solid transparent;
    }
    .wraper .btn-list li input.rangeboard {
        vertical-align: middle;
    }
    .wraper .btn-list li input:hover {
        border: 1px solid #ccc;
        box-shadow: 0 10px 12px #ccc;
    }

js：

    var canvasboard ={
        canvas:$('.canvas'),
        ctx: $('.canvas').get()[0].getcontext("2d"),
        bool:true,
        color:'#000000',//颜色
        weight:'1',//粗细
        arr:[],
        init:function(){
            this.drawboard();
            this.btnlist();
        },
        drawboard: function(){
            let _this =this;
            let ctx = _this.ctx;
            let canvas = this.canvas;
            canvas.mousedown(function(ev){
                ev = ev || window.event;
                _this.bool = true;
                ctx.beginpath();
                ctx.linecap = "round";
                ctx.linejoin = "round";
                ctx.moveto(ev.offsetx, ev.offsety);
                $('body').css('cursor','none');
                $('.icon').css({
                    left: ev.offsetx,
                    top: ev.offsety - 20,
                    display:'block'
                })
                canvas.mousemove(function(ev){
                    if(_this.bool){
                        ev = ev || window.event;
                        ctx.lineto(ev.offsetx,ev.offsety);
                        ctx.stroke();
                    }
                    $('.icon').css({
                        left: ev.offsetx,
                        top: ev.offsety - 20,
                        display: 'block'
                    })
                    $('body').css('cursor', 'none');
                })
                canvas.mouseup(function(){
                    _this.bool = false;
                    ctx.closepath();
                })
                canvas.mouseleave(function () {
                    _this.bool = false;
                    ctx.closepath();
                    $('.icon').css({
                        display: 'none'
                    })
                    $('body').css('cursor', 'auto');
                })
                let imgdata = ctx.getimagedata(0, 0, canvas.get()[0].width, canvas.get()[0].height)
                _this.arr.push(imgdata);
            })
        },
        btnlist(){
            var _this = this;
            let ctx = _this.ctx;
            $('.btn-list').on('click',function(ev){
                ev = ev || window.event;
                let canvasw = _this.canvas.get()[0].width;
                let canvash = _this.canvas.get()[0].height;
                switch (ev.target.classname){
                    case 'clearboard':
                        ctx.clearrect(0, 0, canvasw, canvash);
                        break; 
                    case 'pencil':
                        _this.color = '#000000';
                        ctx.strokestyle = _this.color;
                        _this.weight = '1';
                        ctx.linewidth = _this.weight;
                        $('.colorboard').val(_this.color);
                        $('.rangeboard').val(_this.weight);
                        $('.icon').removeclass('eraser-class').addclass('pencil-class');
                        break; 
                    case 'eraser':
                        _this.color = '#ffffff';
                        ctx.strokestyle = _this.color;
                        _this.weight = '15';
                        ctx.linewidth = _this.weight;
                        $('.colorboard').val(_this.color);
                        $('.rangeboard').val(_this.weight);
                        $('.icon').removeclass('pencil-class').addclass('eraser-class');
                        break;
                    case 'repeal':
                        if(_this.arr.length >0){
                            ctx.putimagedata(_this.arr.pop(),0,0);
                        }
                        break;
                    case 'save':
                        let imgurl = _this.canvas.get()[0].todataurl("image/png");
                        let savea = document.createelement("a");
                        document.body.appendchild(savea);
                        savea.href = imgurl;
                        savea.download = "mypic" + (new date).gettime();
                        savea.target = "_blank";
                        savea.click();
                        break;    
                }
            })
            $('.colorboard').change(function(){
                _this.color = $(this).val();
                _this.ctx.strokestyle = _this.color;
                if ($(this).val() != '#ffffff'){
                    $('.icon').removeclass('eraser-class').addclass('pencil-class');
                }
            })
            $('.rangeboard').change(function () {
                _this.weight = $(this).val();
                _this.ctx.linewidth = _this.weight;
            })
        }
    }
    canvasboard.init();

参考自：腾讯课堂渡一教育