假设我使用以下代码绘制一个HTML5矩形元素:
context.clearRect(25, 72, 32, 32);
我该如何使它透明度为50%?
使用globalAlpha属性。您还需要使用fillRect进行绘制。clearRect只能擦除像素,无法部分擦除,因此您必须使用fillRect或其他绘图原语。
ctx.globalAlpha = 0.2;
ctx.fillRect(50,50,75,50);
ctx.globalAlpha = 1.0;
ClearRect移除了已存在的内容并将其变为空白。最好的方法是使用rgba fillStyle值,因为它只会使矩形(或您正在绘制的任何其他形状)透明。代码如下:
ClearRect清空之前绘制的内容,使用rgba颜色填充矩形(或其他图形)可以使其变为透明。
ctx.fillStyle = 'rgba(225,225,225,0.5)';
ctx.fillRect(25,72,32,32);
ctx.save()
和ctx.restore()
来保存和恢复上下文,以便它不会在全局范围内生效,并将其包装在其他上下文更改周围。 - Ian Jamieson
ctx.globalAlpha=1;
以防止进一步的绘制调用(甚至是先前的调用)也部分透明。 - Kevin JurkowskiclearRect
,否则你会得到一个 "尾随效应"(除非这是你想要的-看起来相当不错)。 - Kevin Jurkowski