使用画布仅删除文本而不删除图像
Fer*_*lus 0 javascript html5 canvas
我想删除我的canvas元素的文本,没有松动的Background-Image的Canvas-Element.
我想我需要保存Imagesrc并将其退回到Canvas-Elementa后clearRect,但我不知道该怎么做.
我希望有人可以帮助我.
如果您希望永久图像写入/擦除/重写文本,您可以尝试在图像上分层画布:
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>