Question

我正在尝试删除canvas元素中的Text，而不会丢失Background-Image的{{1}}。

我想我需要保存Canvas-Element并在Imagesrc之后将其还原到Canvas-Element，但我不知道该怎么做。

我希望有人可以帮助我。

Answer 1

如果您想要永久性图像写入/擦除/重写文本，您可以尝试在图像上分层画布：

enter image description here

<强> HTML

    <div id="wrapper">
        <img id="bkImage" src="yourImage.png" width=300 height=300></canvas>
        <canvas id="canvas" width=300 height=300></canvas>
    </div>

<强> CSS

    body{ background-color: ivory; padding:20px;}
    #wrapper{
        position:relative;
        width:300px;
        height:300px;
    }
    #bkImage{
        position:absolute; top:0px; left:0px;
        border:1px solid green;
        width:100%;
        height:100%;
    }
    #canvas{
        position:absolute; top:0px; left:0px;
        border:3px solid red;
        width:100%;
        height:100%;
    }

然后您可以删除/重写文本而无需清除背景图像。

    function drawText(text,fill,stroke){
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.font="123px verdana";
            ctx.fillStyle=fill;
            ctx.strokeStyle=stroke;
            ctx.lineWidth=4;
            ctx.fillText(text,10,120);
            ctx.strokeText(text,10,120);
    }

这是代码和小提琴：http://jsfiddle.net/m1erickson/fg5sV/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px;}
    #wrapper{
        position:relative;
        width:300px;
        height:300px;
    }
    #bkImage{
        position:absolute; top:0px; left:0px;
        border:1px solid green;
        width:100%;
        height:100%;
    }
    #canvas{
        position:absolute; top:0px; left:0px;
        border:3px solid red;
        width:100%;
        height:100%;
    }

</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    function drawText(text,fill,stroke){
            ctx.clearRect(0,0,canvas.width,canvas.height);
            ctx.font="123px verdana";
            ctx.fillStyle=fill;
            ctx.strokeStyle=stroke;
            ctx.lineWidth=4;
            ctx.fillText(text,10,120);
            ctx.strokeText(text,10,120);
    }

    drawText("Hi!","orange","green");

    $("#remove").click(function(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
    });        
    $("#original").click(function(){
        drawText("Hi!","orange","green");
    });        
    $("#changed").click(function(){
        drawText("Bye!","purple","yellow");
    });        

}); // end $(function(){});
</script>

</head>

<body>
    <button id="remove">Remove the text</button>
    <button id="changed">Change the text</button>
    <button id="original">Original text</button>
    <div id="wrapper">
        <img id="bkImage" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png" width=300 height=300></canvas>
        <canvas id="canvas" width=300 height=300></canvas>
    </div>
</body>
</html>

Answer 2

而不是在画布上使用Text，你可以使用HTML-Text。

使用画布仅删除文本而不删除图像

2 个答案: