清除HTML画布中某个形状下的像素 [英] clear pixels under a shape in HTML canvas

问题描述

我使用HTML画布和JavaScript，而且我需要清除通过关闭路径创建的形状下的所有像素（例如，我使用 flot ，并且我想做圆角，并且要做到这一点，我首先需要通过在角的顶部绘制一个曲线来删除方角。所需的像素）。

I am using an HTML canvas and javascript and I need to clear all of the pixels underneath a shape created by closing a path (for example, I am using flot, and I want to make rounded corners, and to do this, I first need to remove the square corners by drawing a curve on top of the corner to remove the desired pixels).

现在，我只是填充形状与背景相同的颜色，这可以模仿我想做的，但是，它是不理想的，因为它使得不可能将图表放置在非实体背景的顶部，而没有看到方角。我知道有一个clearRect方法，将做我想做的，但只有矩形，我需要做任何封闭的形状。

Right now, I am doing this by just filling the shape with the same color as the background, which can imitate what I want to do, but, it is not ideal as it makes it impossible to place the chart on top of non-solid backgrounds without seeing the square corners. I know that there is a clearRect method that would do what I want to do, but with only rectangles, I need to do it with any closed shape. Is it possible, and if so, how would I do it?

推荐答案

brainjam的代码走向正确的方向，但didn完全解决问题。这里是解决方案：

brainjam's code was heading in the right direction, but didn't fully solve the problem. Here's the solution:

context.save();
context.globalCompositeOperation = 'copy';
context.fillStyle = 'rgba(0,0,0,0)';
//draw shape to cover up stuff underneath
context.fill();
context.restore();

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