h5 canvas的开发简易画图板时间：2022-09-29    作者：panda    访问：1148

代码实现：

<div class="cav">
    <div style="position: absolute;top: 0;z-index: 9999;background: #868380;" onselectstart="return false">
        <input type="color" name="选择颜色" id="color"/>
        <button onclick="lineWidthmax(25)">大号画笔</button>
        <button onclick="lineWidthmax(12)">中号画笔</button>
        <button onclick="lineWidthmax(5)">小号画笔</button>
        <button onclick="lineWidthmax()">画笔加粗</button>
        <button onclick="lineWidthmin()">画笔变细</button>
        <button onclick="exportimages()">导出</button>
    </div>
    <div id="mb"></div>
    <div id="x"></div>
    <div id="y"></div>
    <p>
        <canvas id="cs" height="900px;"></canvas>
    </p>
    <p>
        <br/>
    </p>
</div><style>
        *{margin: 0;padding: 0;}
        .cav {
            position: relative;
            margin: 0 auto;
        }
        #x,#y{position: absolute;display: none;z-index: 99;}
        #x{width: 100%;height: 0;border-bottom: 1px dashed #868380;}
        #y{width: 0;height: 100%;border-right: 1px dashed #868380;top: 0;}
        canvas, #mb{border: 1px solid royalblue;display: block;border: 1px solid royalblue;}
        #mb {
            height: 900px;
            /* background: aliceblue; */
            z-index: 999;
            position: absolute;
            width: 100%;
            border: none;
        }
        button{display: inline-block;width: 6em;height: 2em;margin: 0.2em;vertical-align: text-top;}
        input{display: inline-block;vertical-align: text-top;}</style><script>
        var canvas = document.getElementById('cs');
        var pen = canvas.getContext('2d');
        var color = document.getElementById('color');
        var colorvalue = color.value;
        var xzhou = document.getElementById('x');
        var yzhou = document.getElementById('y');
        var mb = document.getElementById('mb');
            canvas.width = mb.offsetWidth
        pen.lineCap="round";
        colorchange();
        // pen.fillStyle = 'block';
        // pen.fillRect(0, 0, canvas.width, canvas.height);
        colorchange();
            pen.strokeStyle = 'block';
                pen.beginPath();
                pen.moveTo(100,100);
                pen.lineTo(650,100);
                pen.lineTo(650,330);
                pen.lineTo(870,330);
                pen.lineTo(870,670);
                pen.lineTo(650,670);
                pen.lineTo(650,870);
                pen.lineTo(100,870);
                pen.closePath();
                pen.stroke();
        function draw(y){
            pen.beginPath();
            pen.moveTo(120,y+75);
            pen.lineTo(150,y+75);
            pen.lineTo(150,y+125);
            pen.lineTo(120,y+125);
                pen.closePath();
                pen.stroke();
            pen.beginPath();
            pen.moveTo(150,y+100);
            pen.lineTo(250,y+100);
                pen.closePath();
                pen.stroke();
            
        }
        function draw1(y){
            pen.beginPath();
            pen.moveTo(630,y+75);
            pen.lineTo(600,y+75);
            pen.lineTo(600,y+125);
            pen.lineTo(630,y+125);
                pen.closePath();
                pen.stroke();
            pen.beginPath();
            pen.moveTo(600,y+100);
            pen.lineTo(500,y+100);
                pen.closePath();
                pen.stroke();
            
        }
        for(var i = 1; i < 7; i++){
            draw(55 + 50*i);
        }
        for(var i = 1; i < 5; i++){
            draw1(50*i + 5);
        }
        for(var i = 1; i < 3; i++){
            draw1(50*i + 545);
        }
        // draw(80);
        color.oninput = colorchange;
        mb.onmousedown = mousedown;
        mb.ontouchstart = touchstart;
        mb.onmouseup = mouseup;
        mb.ontouchend = mouseup;
        mb.ontouchmove = touchmove;
        mb.onmouseout = onmouseout;
        mb.onmousemove = mousemove;
        var x=0,y=0,move=false;
        function colorchange(){
            colorvalue = color.value;
            // console.log(color);
            strokeStyle(colorvalue);
        }
        function lineWidthmax(i=false){
            if(i){
                pen.lineWidth = i;
            }
            else{
                pen.lineWidth += 1;
            }
        }
        function lineWidthmin(){
            pen.lineWidth -= 1;
        }
        function strokeStyle(color){
            pen.strokeStyle = color;
        }
        function mousedown(e){
            e.preventDefault();
            var mouseX = e.layerX;
            var mouseY = e.layerY;
            // console.log(mouseX);
            move=true;
            x=mouseX;
            y=mouseY;
        }
        function touchstart(e){
            e.preventDefault();
            var mouseX = e.changedTouches[0].pageX;
            var mouseY = e.changedTouches[0].pageY;
            move=true;
            x=mouseX;
            y=mouseY;
        }
        function touchmove(e){
            e.preventDefault();
            var mouseX = e.changedTouches[0].pageX;
            var mouseY = e.changedTouches[0].pageY;
            xzhou.style.display = "block";
            xzhou.style.top =mouseY-133 + 'px';
            yzhou.style.display = 'block';
            yzhou.style.left = mouseX-54 + 'px';
            if(move){
                pen.beginPath();
                pen.moveTo(x,y);
                pen.lineTo(mouseX-54,mouseY-133);
                pen.stroke();
            }
            x=mouseX;
            y=mouseY;
        }
        function onmouseout(e){
            move = false;
            xzhou.style.display = "none";
            yzhou.style.display = 'none';

          }
        function mousemove(e){
          console.log(e);
            e.preventDefault();
            var mouseX = e.layerX;
            var mouseY = e.layerY;
            xzhou.style.display = "block";
            xzhou.style.top =mouseY + 'px';
            yzhou.style.display = 'block';
            yzhou.style.left = e.pageX-54 + 'px';
            if(move){
                pen.beginPath();
                pen.moveTo(x,y);
                pen.lineTo(mouseX,mouseY);
                pen.stroke();
            }
            x=mouseX;
            y=mouseY;
        }
        function mouseup(e){
            e.preventDefault();
            move=false
        }
        function exportimages(){
            let imagesdata = canvas.toDataURL();
            let a = document.createElement('a');
            a.download = 'images';
            a.style.display = 'none';
            a.href = imagesdata;
            document.body.appendChild(a);
            a.click();
            URL.revokeObjectURL(a.href);
            document.body.removeChild(a);
        }</script>