JS-手写CANVAS 可刷新运行 刷新

在 移动端打开,可在下方书写

代码:

document.body.style.position='fixed';
    var el1 = document.createElement("div");
    var el2 = document.createElement("div");
    var el3 = document.createElement("div");
    el2.append("清除");
    el3.append("保存");
    el1.setAttribute("id", "canvas");
    el2.setAttribute("id", "clearCanvas");
    el3.setAttribute("id", "saveCanvas");
    var js=document.getElementById('js');
    js.append(el1);
    js.append(el2);
    js.append(el3);
    function lineCanvas(obj) {
        this.linewidth = 1;
        this.color = "#000000";
        this.background = "#ffffff";
        for (var i in obj) {
            this[i] = obj[i];
        };
        this.canvas = document.createElement("canvas");
        this.el.appendChild(this.canvas);
        this.cxt = this.canvas.getContext("2d");
        this.canvas.width = this.el.clientWidth;
        this.canvas.height = this.el.clientHeight;
        this.cxt.fillStyle = this.background;
        this.cxt.fillRect(0, 0, this.canvas.width, this.canvas.width);
        this.cxt.strokeStyle = this.color;
        this.cxt.lineWidth = this.linewidth;
        this.cxt.lineCap = "round";
        //开始绘制
        this.canvas.addEventListener("touchstart", function(e) {
            console.log(e.changedTouches[0].pageY,this.canvas.offsetTop,document.body.clientTop)
            this.cxt.beginPath();
            this.cxt.moveTo(e.changedTouches[0].pageX-getElementLeft(this.canvas), e.changedTouches[0].pageY-getElementTop(this.canvas));
        }.bind(this), false);
        //绘制中
        this.canvas.addEventListener("touchmove", function(e) {
            console.log('def')
            this.cxt.lineTo(e.changedTouches[0].pageX-getElementLeft(this.canvas), e.changedTouches[0].pageY-getElementTop(this.canvas));
            this.cxt.stroke();
        }.bind(this), false);
        //结束绘制
        this.canvas.addEventListener("touchend", function() {
            console.log('hig')
            this.cxt.closePath();
        }.bind(this), false);
        //清除画布
        this.clearEl.addEventListener("click", function() {
            this.cxt.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }.bind(this), false);
        //保存图片,直接转base64
        this.saveEl.addEventListener("click", function() {
            var imgBase64 = this.canvas.toDataURL();
           var img=document.createElement("img");
           img.src=imgBase64
           insertAfter(img,this.el);
             this.el.append('下方是一图片')
            console.log(imgBase64);
        }.bind(this), false);
    };
    function insertAfter(newElement, targentElement) {
        var parent = targentElement.parentNode;
        if (parent.lastChild == targentElement) {
            parent.appendChild(newElement);
        } else {
            parent.insertBefore(newElement, targentElement.nextSibling)
        }
    }
    function getElementLeft(element){
    var actualLeft = element.offsetLeft;
    var current = element.offsetParent;

    while (current !== null){
      actualLeft += current.offsetLeft;
      current = current.offsetParent;
    }

    return actualLeft;
  }

  function getElementTop(element){
    var actualTop = element.offsetTop;
    var current = element.offsetParent;

    while (current !== null){
      actualTop += current.offsetTop;
      current = current.offsetParent;
    }

    return actualTop;
  }
    
    $(document).ready( function() {
        new lineCanvas({
            el: el1,//绘制canvas的父级div
            clearEl: el2,//清除按钮
            saveEl: el3,//保存按钮
            //      linewidth:1,//线条粗细,选填
            //      color:"black",//线条颜色,选填
            //      background:"#ffffff"//线条背景,选填
        });
    });

输出: