带背景的Canvas图形擦除方法

panda_8101

已于 2024-10-19 16:38:14 修改

阅读量339

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 html

于 2024-10-19 16:29:49 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_38366919/article/details/143080134

1 需求：

在一张图上，可以擦除自绘图形，但不能擦除背景。

2. 实现方法

用两张完全重合的Canvas元素来实现，前景Canvas的背景色为rgba(0,0,0,0），擦除操作只在前景Canva上实现。

3. 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>canvas保留背景擦除演示</title>
    <style type="text/css">
        #bg,#fg {
            border: 1px solid #ADACB033;
            background-color: red;
            display: block;
            margin: 20px auto;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 0;
        }
        
        #fg {
            background-color: rgba(0, 0, 0, 0);
            z-index: 1;
        }
    </style>
</head>
<body>
    <canvas id="bg" width="300" height="300"></canvas>
    <canvas id="fg" width="300" height="300"></canvas>
</body>
<script type="text/javascript">
    window.onload = function() {
        //背景：
        var bg = document.getElementById('bg');
        var ctxb = bg.getContext('2d');
        ctxb.font = "40pt Calibri";
        ctxb.fillText("背景文字", 50, 90);

        //前景
        var fg = document.getElementById('fg');
        var ctx = fg.getContext('2d');
        ctx.moveTo(210, 10);
        ctx.lineTo(20, 210);
        ctx.lineWidth = 20;
        ctx.strokeStyle = "#fff";
        ctx.stroke();

        fg.onmousedown = function(ev) {
            var ev = ev || window.event;
            ctx.moveTo(ev.clientX - fg.offsetLeft, ev.clientY - fg.offsetTop);
            document.onmousemove = function(ev) {
                var ev = ev || window.event;
                let x = ev.clientX - fg.offsetLeft;
                let y = ev.clientY - fg.offsetTop;

                ctx.fillStyle = "#0000";
                ctx.clearRect(x - 20, y - 20, 40, 40);
            };
            fg.onmouseup = function() {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    };
</script>
</html>