canvas画布可修改画笔颜色、粗细、返回到上一步、清除画布、保存图片

最新推荐文章于 2024-05-17 16:35:16 发布

php的绯闻女友

最新推荐文章于 2024-05-17 16:35:16 发布

阅读量2.3k

点赞数 3

分类专栏：前端文章标签： canvas js html5

本文链接：https://blog.csdn.net/Moxi099/article/details/115574051

版权

前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

直接上代码，canvas真有趣

参考https://blog.csdn.net/zemprogram/article/details/89077403

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画图板</title>
</head>

<body>
    <div style="width:506px;margin:50px auto;">
        <input type="color" id="color">
        <select name="" id="line-width">
            <option value="1">--请选择线条粗细（像素）--</option>
            <option value="2">2px</option>
            <option value="5">5px</option>
            <option value="8">8px</option>
            <option value="12">12px</option>
            <option value="15">15px</option>
        </select>
        <input type="button" value="清除画布" id="btnClear">
        <input type="button" value="返回上一步" id="return">
        <input type="button" value="保存" id="save">
        <canvas id="canvas" width="500" height="500" style="display: block;border: 3px black solid;margin-top: 10px;"></canvas>
    </div>

    <script type="text/javascript">
        //获取画布元素
        let canvas = document.getElementById("canvas");
        let context = canvas.getContext("2d");

        //将所有像素点信息存储在数组中，后续返回上一步时可用到
        let restore = [context.getImageData(0, 0, 500, 500)];

        //获取画笔颜色
        let color = document.getElementById("color");
        //获取画笔宽度
        let lineWidth = document.getElementById("line-width");
        let btn = document.getElementById("btnClear");
        let returnStep = document.getElementById("return");
        let save = document.getElementById("save");
        isDraw = false;
        //绘图
        //鼠标摁下时
        canvas.onmousedown = function(event) {
                isDraw = true;

                context.lineWidth = lineWidth.value;
                context.strokeStyle = color.value;

                context.beginPath();
                context.moveTo(event.offsetX, event.offsetY);
            }
            //鼠标开始移动时绘图
        canvas.onmousemove = function(event) {
                if (isDraw) {
                    context.lineTo(event.offsetX, event.offsetY);
                    context.stroke();
                }
            }
            //鼠标松开时停止绘图
        canvas.onmouseup = function() {
                isDraw = false;
                //将此时绘制的信息存储到restore数组中
                restore[restore.length] = context.getImageData(0, 0, canvas.width, canvas.height);
            }
            //鼠标移出canvas后停止绘图
        canvas.onmouseout = function() {
                isDraw = false;
            }
            //点击按钮清除画布
        btn.onclick = function() {
                context.clearRect(0, 0, canvas.width, canvas.height);
                restore[restore.length] = context.getImageData(0, 0, canvas.width, canvas.height);
            }
            //返回上一步
        returnStep.onclick = function() {
                if (restore.length > 1) {
                    context.putImageData(restore[restore.length - 2], 0, 0);
                    restore.length--;
                }
            }
            //保存图片
        save.onclick = function() {
            let name = prompt("请输入要保存的图片名称", "canvas绘制图片");
            if (name === "") {
                alert("图片名字不能为空")
            } else {
                let href = canvas.toDataURL();
                let a = document.createElement('a');
                a.download = name;
                a.href = href;
                a.dispatchEvent(new MouseEvent('click'));
            }
        }
    </script>
</body>

</html>