JS canvas 中的撤销，重做，保存

最新推荐文章于 2024-06-28 14:33:15 发布

qq_2524963996

最新推荐文章于 2024-06-28 14:33:15 发布

阅读量1k

点赞数 1

文章标签： javascript 前端 html css css3 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_44161703/article/details/129495674

版权

直接上代码

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

<head>
    <meta charset="UTF-8">
    <title>在canvas上面获取特定位置的base64信息</title>
</head>
<style>
    #origin_canvas {
        width: 200px;
        height: 200px;

    }
</style>

<body>
    <div>
        <canvas id="canvas" width="400" height="400"></canvas>
        <button id="undoBtn">撤销</button>
        <button id="redoBtn">重做</button>
        <button id="saveBtn">保存</button>
        <img id="resultImg">

    </div>
    <script>
        const canvas = document.getElementById('canvas');
        const undoBtn = document.getElementById('undoBtn');
        const redoBtn = document.getElementById('redoBtn');
        const saveBtn = document.getElementById('saveBtn');
        const context = canvas.getContext('2d');
        const resultImg = document.getElementById('resultImg');

        let undoList = []; // 用于保存所有操作，用于撤销和重做
        let redoList = []; // 用于保存所有撤销的操作，用于重做

        let isDrawing = false;
        let currentPath = null;

        // 鼠标按下事件
        canvas.addEventListener('mousedown', e => {
            isDrawing = true;
            currentPath = {
                color: context.strokeStyle,
                width: context.lineWidth,
                points: [{ x: e.offsetX, y: e.offsetY }]
            };
        });

        // 鼠标移动事件
        canvas.addEventListener('mousemove', e => {
            if (!isDrawing) return;
            currentPath.points.push({ x: e.offsetX, y: e.offsetY });
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawPaths([...undoList, currentPath]);
        });

        // 鼠标松开事件
        canvas.addEventListener('mouseup', e => {
            isDrawing = false;
            undoList.push(currentPath);
            redoList = [];
        });

        // 鼠标离开事件
        canvas.addEventListener('mouseleave', e => {
            isDrawing = false;
        });

        // 撤销按钮点击事件
        undoBtn.addEventListener('click', e => {
            if (undoList.length === 0) return;
            const lastPath = undoList.pop();
            redoList.push(lastPath);
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawPaths(undoList);
        });

        // 重做按钮点击事件
        redoBtn.addEventListener('click', e => {
            if (redoList.length === 0) return;
            const lastPath = redoList.pop();
            undoList.push(lastPath);
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawPaths(undoList);
        });

        // 保存按钮点击事件
        saveBtn.addEventListener('click', e => {
            const dataUrl = canvas.toDataURL();
            resultImg.src = dataUrl;
        });

        // 画所有的路径
        function drawPaths(paths) {
            paths.forEach(path => {
                context.beginPath();
                context.strokeStyle = path.color;
                context.lineWidth = path.width;
                context.moveTo(path.points[0].x, path.points[0].y);
                path.points.slice(1).forEach(point => {
                    context.lineTo(point.x, point.y);
                });
                context.stroke();
            });
        }

    </script>
</body>

</html>