2020/7/15 js模拟画板

效果： http://dsj-666.gitee.io/draw

源码：

    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    body {
        background-color: antiquewhite;
    }
    
    .wrapper {
        margin: 10px;
    }
    
    .wrapper canvas {
        border: 1px soild pink;
        border-radius: 25px;
        box-shadow: 10px 10px 10px #888888;
    }
    
    .wrapper .btn-list {
        width: 1000px;
        text-align: center;
    }
    
    .wrapper .btn-list li {
        display: inline-block;
        margin: 40px;
    }
    
    .wrapper .btn-list li input {
        width: 60px;
        background-color: rgb(166, 197, 226);
        border-radius: 5px;
        color: white;
        border: none;
        cursor: pointer;
        padding: 5px;
    }
    
    .range {
        -webkit-appearance: none;
        height: 1px;
        outline: none;
        width: 180px !important;
        border-radius: 20px;
    }
    
    .range::-webkit-slider-thumb {
        /* 滑块的样式 */
        -webkit-appearance: none;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background-color: rgb(70, 141, 158);
        box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
    }
    
    .wrapper .btn-list li input:hover {
        transition: .3s;
        transform: translate(-5px, -5px);
        box-shadow: 5px 5px 5px #888888;
        background-color: rgb(142, 191, 238);
    }

 

/**
 * darwing         2020/7/15
 */


window.onload = function() {
    var darwingLineObj = {
        cavs: $('.cavs'),
        context: $('.cavs')[0].getContext('2d'),
        color: $('input:eq(0)'),
        cleanBoard: $('input:eq(1)'),
        eraser: $('input:eq(2)'),
        res: $('input:eq(3)'),
        range: $('input:eq(4)'),
        flag: null,
        arrImg: [],
        init: function() {
            this.context.lineCap = 'round'; //线条起始开始的样式 是圆的
            this.context.lineJoin = 'round'; //线条转弯的时候的样式
            this.draw();
            this.btnFn();
        },
        draw: function() {
            var cavs = this.cavs,
                self = this;
            var c_x = cavs.offset().left,
                c_y = cavs.offset().top;

            cavs.mousedown(function(e) {
                self.flag = true;
                e = e || window.event;
                var m_x = e.pageX - c_x,
                    m_y = e.pageY - c_y;
                self.context.beginPath();
                self.context.moveTo(m_x, m_y);
                cavs.mousemove(function(e) {
                    if (self.flag) {
                        self.context.lineTo(e.pageX - c_x, m_y = e.pageY - c_y);
                        self.context.stroke();
                    }
                });
                cavs.mouseup(function() {
                    self.flag = false;
                });
                cavs.mouseleave(function() {

                    self.flag = false;
                });
                var imgData = self.context.getImageData(0, 0, self.cavs[0].width, self.cavs[0].height);
                self.arrImg.push(imgData);
                // console.log(arrImg);
                //console.log(self.arrImg);
            });
        },
        btnFn: function() {
            var self = this;
            $('.btn-list').on('click', function(e) {
                e = e || window.event;
                switch (e.target.value) {
                    case '清屏':
                        self.context.clearRect(0, 0, self.cavs[0].width, self.cavs[0].height)
                        break;
                    case '橡皮':
                        self.context.strokeStyle = 'antiquewhite';
                        break;
                    case '撤销':
                        if (self.arrImg.length > 0) {
                            self.context.putImageData(self.arrImg.pop(), 0, 0);
                        }
                        break;

                }
            });
            this.color.change(function(e) { //颜色变化的时候
                self.context.strokeStyle = $(this).val();
              
            });
            this.range.change(function(e) {
                self.context.lineWidth = $(this).val();
            })
        }
    }

    darwingLineObj.init();

}

练习注意点：

css : 

• 当input 的type为range的时候，滑块的样式可能不能通过input直接修改，设置类名修改，
• -webkit-appearance：none  来清除默认样式，再来设置滑块和轨道的样式

 

      canvas:

• getImageDate(x,y,宽，高)  获取画布画出来的图，putImageData()  放置获取的图

   var img = ctx.getImageData(70, 70, 160, 160);
   ctx.putImageData(img, 300, 300);
  
  

   

• 多个按钮绑定点击时间的 时候，可以用委托事件方式，不用一个个绑定，再用e.target辨别

• jq对象对象没有getContext('2d') 方法，注意转换为 DOM对象

•  可以对始终点的线条设置圆角样式，拐弯点设置样式为圆角

• 相对大一点的js文件，最好写个对象，调用对象里的初始化函数，来调用其他函数。

主要思路：

• 画笔的实现主要通过鼠标移动事件，来实时的计算出鼠标相对画板的位置，用上下文对象.lineTo画出
• 清屏功能就是通过clearRect()方法 实现 范围是整个画板，注意获取画板的宽高的时候转换为DOM元素
• 橡皮擦功能就是画笔功能 颜色设置为背景色一样就能实现
• 撤销就是将，每一次按下按钮的时候就将整个画布保存在数组中，每次点撤销的时候即使pop()删除数组最后一个元素并返回，这就回到的上一个状态