自己写的一个简易的画板，canvas写的，今天10.24，祝大家节日快乐啊，O(∩

本文链接：https://blog.csdn.net/this_not_is_this/article/details/102722459

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    input{
        /* width: 50px; */
        padding: 0 10px;
    }
    </style>
</head>
<body>
    <canvas width="1000" height="500"></canvas><br>
    粗细：<input type="number">
    颜色：<input type="text">
    <input type="button" value="确认">
    <input type="button" value="清除">
    <input type="button" value="撤销">
    <input type="button" value="反撤销">
    <script>
    var bn=document.querySelector("[type=button]");
    var num=document.querySelector("[type=number]");
    var col=document.querySelector("[type=text]");
    var bn1=document.querySelectorAll("input")[3];
    var bn2=document.querySelectorAll("input")[4];
    var bn3=document.querySelectorAll("input")[5];
    bn.addEventListener("click",clickHandler);
    bn1.addEventListener("click",clearHandler);
    bn2.addEventListener("click",cxHandler);
    bn3.addEventListener("click",cxHandler1);
    var canvas=document.querySelector("canvas");
    canvas.style.border="1px solid #000";
    var ctx=canvas.getContext("2d");
    canvas.addEventListener("mousedown",downHandler);
    document.addEventListener("mouseup",downHandler);
    var arr=[];
    arr.push(ctx.getImageData(0,0,1000,500));
    var i=0;
    function downHandler(e){
        if(e.target.nodeName!=="CANVAS") return;
        if(e.type==="mousedown"){ 
            // reset();
            ctx.moveTo(e.offsetX,e.offsetY);
            // ctx.strokeStyle= "#" +Math.random().toString(16).substring(2,8);
            document.addEventListener("mousemove",moveHandler);
        }else{
            arr.push(ctx.getImageData(0,0,1000,500));
            i=arr.length-1;
            document.removeEventListener("mousemove",moveHandler);
        }
    }

    function moveHandler(e){
        ctx.lineTo(e.offsetX,e.offsetY);
        ctx.stroke();
    }

    function clickHandler(){
        reset();
        ctx.lineWidth=num.value-0;
        ctx.strokeStyle=col.value;
    }

    function clearHandler(){
        canvas.width=1000;
        // clickHandler();
    }
    function cxHandler(){
        canvas.width=1000;
        i--;
        if(i<0){
            i=0;
            canvas.width=1000;
        } 
        ctx.putImageData(arr[i],0,0);
    }
    function cxHandler1(){
        canvas.width=1000;
        i++;
        if(i>arr.length-1){
            i=arr.length-1;
        }
        ctx.putImageData(arr[i],0,0);
    }

    function reset(){
        canvas.width=1000;
        ctx.putImageData(arr[i],0,0);
    }
    </script>
</body>
</html>