发表新帖
发表新帖

Delete only Text but not the Image using Canvas

前端 未结
关注
2 1703
清酒与你
清酒与你 2021-01-28 01:40

I am trying to delete Text in my canvas element, without loosing the Background-Image of the Canvas-Element.

I think I need to save the I

相关标签:
2条回答
  • 礼貌的吻别
    2021-01-28 01:56

    If you want a permanent image to write/erase/rewrite text on, you might try layering a canvas over an image:

    enter image description hereenter image description hereenter 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%;
    }

    Then you can erase/rewrite text without having to clear the background image.

        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);
    }

    Here’s code and a Fiddle: 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>
    0 讨论(0)
  • 野的像风
    2021-01-28 01:59

    Instead of using Text on the canvas, you can use HTML-Text.

    0 讨论(0)
 看不清?
提交回复
热议问题