原生js画板(PC&移动端)

最新推荐文章于 2024-06-07 21:15:46 发布

小茄子哦

最新推荐文章于 2024-06-07 21:15:46 发布

阅读量345

点赞数

文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_44814732/article/details/107224123

版权

 body{
        padding: 0px;
        margin: 0px;
    }   
    #draw{
        height:600px;
        width:600px;
        margin: auto;
        margin-top: 10px;
    }
    #save{
        margin-top: 5px;
    }
    canvas{
        cursor: url("pen.ico"),auto;
    }

<body style="background-color:#ccc">
    <div id="draw">
        <canvas id="mycanvas" height="500" width="600" style="background-color: #fff"></canvas><br>
        <button id="reset" class="button button-action button-rounded">清空画板</button>
        <button id="color_0" class="button button-caution button-box button-small" style="background-color: black">黑</button>
        <button id="color_1" class="button button-primary button-box button-small" style="background-color: rgb(39, 146, 233)">蓝</button>
        <button id="color_2" class="button button-action button-box button-small" style="background-color: rgb(141, 207, 115)">绿</button>
        <button id="color_3" class="button button-caution button-box button-small" style="background-color: rgb(194, 41, 41)">红</button>
        <span class="button-dropdown" data-buttons="dropdown">
    
    <div class="button-dropdown-list">
            <input type="radio" name="colors" id="wth_1">细
            <input type="radio"name="colors" id="wth_2">中
            <input type="radio" name="colors" id="wth_3">粗
    </div>
  </span>
        <button id="eraser" class="button button-rounded">橡皮擦</button>
        <button id="save" class="button button-block button-rounded button-highlight button-large">保存</button>
    </div>
</body>

    window.onload = function () {
        var cvs = document.getElementById("mycanvas");
        var plt = document.getElementById("mycanvas").getContext("2d");
        var btn_1 = document.getElementById("reset");
        var black = document.getElementById("color_0");
        var blue = document.getElementById("color_1");
        var green = document.getElementById("color_2");
        var red = document.getElementById("color_3");
        var wth_1 = document.getElementById("wth_1");
        var wth_2 = document.getElementById("wth_2");
        var wth_3 = document.getElementById("wth_3");
        var eraser = document.getElementById("eraser");
        var save = document.getElementById("save");
        var is_eraser = false;

        //PC
        cvs.onmouseover = function (ev) {
            ev.preventDefault();
        }
        cvs.onmousedown = function (ev) {
            var pageX = ev.pageX || ev.changedTouches[0].pageX;
            var pageY = ev.pageY || ev.changedTouches[0].pageY;

            //每次都从一个新起点开始，会默认结束上一个。写restore的话会闭合图像
            plt.beginPath();
            plt.moveTo(pageX - cvs.offsetLeft, pageY - cvs.offsetTop);

            cvs.onmousemove = function (ev) {
                var pageX = ev.pageX || ev.changedTouches[0].pageX;
                var pageY = ev.pageY || ev.changedTouches[0].pageY;
                plt.lineTo(pageX - cvs.offsetLeft, pageY - cvs.offsetTop);
                plt.stroke();
            }
        }
        cvs.onmouseup = function () {
            cvs.onmousemove = null;
        }
        document.ontransitionend = function () {
            cvs.onmousemove = null;
        }

        //Mobile Phone
        cvs.ontouchstart = cvs.onmousedown
        cvs.ontouchmove = function (ev) {
            var pageX = ev.pageX || ev.changedTouches[0].pageX;
            var pageY = ev.pageY || ev.changedTouches[0].pageY;
            plt.lineTo(pageX - cvs.offsetLeft, pageY - cvs.offsetTop);
            plt.stroke();
        }

        btn_1.onclick = function () {
            plt.clearRect(0, 0, 600, 500);
        }

        black.onclick = function () {
            if (!is_eraser) {
                plt.strokeStyle = "rgb(0,0,0)";
            }
        }
        blue.onclick = function () {
            if (!is_eraser) {
                plt.strokeStyle = "rgb(71,174,249)";
            }
        }
        green.onclick = function () {
            if (!is_eraser) {
                plt.strokeStyle = "rgb(165,222,55)";
            }
        }
        red.onclick = function () {
            if (!is_eraser) {
                plt.strokeStyle = "rgb(255,67,81)";
            }
        }

        wth_1.onclick = function () {
            if (!is_eraser) {
                plt.lineWidth = 1;
            }
        }
        wth_2.onclick = function () {
            if (!is_eraser) {
                plt.lineWidth = 3;
            }
        }
        wth_3.onclick = function () {
            if (!is_eraser) {
                plt.lineWidth = 5;
            }
        }

        eraser.onclick = function () {
            if (!is_eraser) {
                plt.save();
                plt.strokeStyle = "rgb(255,255,255)";
                plt.lineWidth = 12;
                eraser.innerHTML = "画笔";
                is_eraser = true;
                $(cvs).css("cursor", "url('eraser.ico'),auto");
            } else {
                plt.restore();
                eraser.innerHTML = "橡皮擦";
                is_eraser = false;
                $(cvs).css("cursor", "url('pen.ico'),auto");
            }
        }

        save.onclick = function () {
            var image = cvs.toDataURL("image/png").replace("image/png", "image/octet-stream");
            window.location.href = image;
        }
    }