如何清除画布中图像的矩形 [英] How to clear rectangle on Image in Canvas

问题描述

我需要清除画布上的一个矩形，并且不会损坏现有图像。我可以绘制小矩形点并将其清除。但问题是，当我清除矩形时，它仍然是图像上的白色小块。

有人可以告诉我如何清除图像上的矩形而不会损坏现有图像。

$ b <1> context.fillStyle =white;

<2> context.clearRect（xCoordinate，yCoordinate，10，08）;

在此先感谢！

解决方案

Canvas不能以这种方式工作。它是一个单独的图层，默认情况下它也是透明的。因此，考虑到这一点，您可以通过简单地给canvas元素一个CSS背景来实现你想要的。这样，你在背景上绘制的任何东西都可以很容易地被移除，背景将会显示出来。

 ＃backing-canvas { 
 background-image：url（http://www.placebear.com/300/200）; 
} 
  

JSFiddle示例： https://jsfiddle.net/yLf5erut/

I need to clear a rectangle Drawn on Image in Canvas with out damage existing image. I can draw small rectangle points and clear that out. But the problem is when I clear rectangle it remains as white small patch on image.

Can someone tell me how to clear a rectangle on image without damage the existing image.

I have used following methods to clear rectangles but didn't work.

1) context.fillStyle ="white";

2) context.clearRect(xCoordinate, yCoordinate, 10, 08);

Thanks in advance!

解决方案

Canvas doesn't work that way. It's a single layer, its also transparent by default. So with that in mind, you might be able to achieve what you want by simply giving the canvas element a CSS background. That way anything you draw on top of that background can easily be removed and the background will show through.

#backed-canvas{
    background-image: url(http://www.placebear.com/300/200);
}

JSFiddle example: https://jsfiddle.net/yLf5erut/

这篇关于如何清除画布中图像的矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！