在画布中仅使用globalAlpha作为画布的一部分

Question

我想为部分画布设置透明度 除了我在画布中创建的矩形外，我可以对所有画布使用globalAlpha吗？

Answer 1

正如我在评论中两次所说，你只需要将全局alpha设置为你想要的，用alpha绘制你想要的东西，然后将全局alpha改为新值，然后绘制你想要的那个阿尔法。这可以按如下方式完成

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(255, 0, 0,1)';
ctx.fillRect(0, 0, 150, 50);
ctx.globalAlpha = 0.2; 
ctx.fillRect(150,50,150,50);

Demo

Answer 2

如果你的意思是如何在之后制作一个透明的矩形，你可以在画布上绘制一些东西，你可以做到以下几点：

/// clear a rectangle to make canvas transparent
ctx.globalCompositeOperation = 'destination-out';

/// set alpha using a fill color with transparency
ctx.fillStyle = 'rgba(0,0,0,0.5)';

/// fill rectangle which now will become partly transparent all the way
ctx.fillRect(40, 40, 320, 320);

/// reset composite mode
ctx.globalCompositeOperation = 'source-over';

Live demo here

如果这不是您的意思，那么您需要计划您的图纸。正如其他地方所提到的，您可以在之前设置globalAlpha ，然后绘制一些东西，绘制它，然后在绘制下一个之前设置globalAlpha。设置globalAlpha后的每次绘制都将使用该alpha值绘制（如果图像alpha的填充样式，笔触样式也使用透明度，这将是两个alpha值相乘时的结果）。 / p>

globalCompositeOperation决定 将如何绘制，例如在现有内容之上，而不是等等（请参阅概述here）。