0

我正在尝试删除我的画布元素中的文本，而不会Background-Image丢失Canvas-Element.

我想我需要保存Imagesrc并把它还给Canvas-Elementafter a clearRect，但我不知道该怎么做。

我希望有人能帮助我。

4

2 回答 2

6

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

在此处输入图像描述在此处输入图像描述在此处输入图像描述

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>
于 2013-08-25T18:22:38.147 回答
0

您可以使用 HTML 文本，而不是在画布上使用文本。

于 2016-02-12T22:41:03.177 回答