使用Canvas仅删除文本而不删除图像 [英] Delete only Text but not the Image using Canvas
问题描述
我试图在canvas元素中删除Text，而不会丢失 Canvas-Element Background-Image >。
I am trying to delete Text in my canvas element, without loosing the Background-Image of the Canvas-Element.
我想我需要保存 Imagesrc 并将其还给 ，但我不知道怎么做。 clearRect 之后的Canvas-Element
I think I need to save the Imagesrc and give it back to the Canvas-Element after a clearRect, but I don't know how to do it.
我希望有人可以帮助我。
I hope somebody can help me.
推荐答案
如果您想要永久性图像写入/擦除/重写文本，您可以尝试在图像上分层画布：
If you want a permanent image to write/erase/rewrite text on, you might try layering a canvas over an image:
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);
}
这是代码和小提琴： 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>
这篇关于使用Canvas仅删除文本而不删除图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
