消除在图像Canvas HTML5上绘制的色线
[英]Erase color lines Drawn on image Canvas HTML5
问题描述
I have one canvas with image, on that i have drawn one rectangle with red color.Now i want to clear that red color rectangle on touch event of user, My problem is it clears image too. 
我有一张带有图像的画布，在上面我绘制了一个带有红色的矩形。现在我想在用户触摸事件时清除该红色矩形，我的问题是它也清除了图像。 It is not showing image. 它没有显示图像。
Using code: 使用代码：
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" width="220" height="277" src="img_the_scream.jpg" alt="The Scream">
<p>Canvas:</p>
<canvas id="myCanvas" width="240" height="297" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
ctx.fillStyle = "red";
ctx.fillRect(0, 0, 300, 150);
ctx.clearRect(20, 20, 100, 50);
}
</script>
</body>
</html>
My Result is: 我的结果是：
What i expect : 我期望什么：
Also, I have checked this Fiddle , Now How can I fill color on that removed area again. 另外，我已经检查了该小提琴 ，现在如何再次在该删除的区域填充颜色。
2 个解决方案
解决方案1
0 2015-09-29 11:27:14
Basically you need to create yourself a rect not a fillRect, once you have created your rect you then draw your image, and the image you supply will be used to fill in the rect you drew 基本上，您需要创建自己的rect而不是fillRect，一旦创建了rect，您就可以绘制图像，并且您提供的图像将用于填充绘制的rect。
jsFiddle : https://jsfiddle.net/CanvasCode/308tv9dL/3/ jsFiddle： https ://jsfiddle.net/CanvasCode/308tv9dL/3/
javascript javascript
render = function () {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.rect(25, 25, 150, 150);
ctx.clip();
ctx.drawImage(img, 0, 0, 300, 200);
}
render();
解决方案2
0 2015-09-29 11:36:45
window.onload = function() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img, 10, 10); var cOver = document.getElementById("myCanvasOver"); var overtx = cOver .getContext("2d"); overtx .fillStyle = "red"; overtx.fillRect(0, 0, 300, 150); overtx.clearRect(20, 20, 100, 50); }
<p>Image to use:</p> <img id="scream" src="http://www.w3schools.com/html/img_the_scream.jpg" alt="The Scream" width="220" height="277"> <p>Canvas:</p> <div style='position:relative;height:300px;width:250px;'> <canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;"></canvas> <canvas id="myCanvasOver" width="250" height="300" style="position:absolute;top:0;right:0;"> </canvas> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.