Question

所以我有一个canvas，我想在其上绘制多个图像，然后将它们分层，所以;第一张图片会有opacity: 0.5;图片，其中两张图片会opacity: 0.7，然后第三图片会成为opacity: 0.3;。我的问题。

我应该在一个页面上有多个画布元素，然后position: absolute;将它们叠加在一起或尝试别的吗？

只是想知道A.性能和B.这个语义是否正确？感谢。

Answer 1

您可以在同一画布上绘制图像只需在绘制图像之前更改.globalAlpha属性。

ctx.save();
ctx.globalAlpha = 0.8;
ctx.drawImage(image1, 0, 0);
ctx.restore();

ctx.save();
ctx.globalAlpha = 0.3;
ctx.drawImage(image2, 0, 0);
ctx.restore();

ctx.save();
ctx.globalAlpha = 0.5;
ctx.drawImage(image3, 0, 0);
ctx.restore();

//...

fiddle

Answer 2

是的，多个画布元素相互叠加是实现分层的好方法。当然，出于性能原因，我只坚持使用两三个，除非您知道您的网站只能由高性能的浏览器/处理器查看。如果您不介意丢失输出中的分层，您可以使用一个隐藏的画布作为缓存来准备绘图，然后将每个图层复制到您显示的另一个画布上。

如果您使用多个元素，您可能希望将它们放在div包装器或类似的东西中，以便更好地组织。请注意，默认情况下，画布是透明的：换句话说，只要您不绘制想要查看的内容或设置背景颜色，就可以看到它们下面的内容。

不是在画布元素上设置CSS不透明度，而是在绘制时使用画布上下文中的globalAlpha javascript属性;或者在任何单独的绘图函数调用之前将alpha设置为fillStyle，如下所示：

var red = 255, // 100%
    green = 128, // 50%
    blue = 0, // 0%
    alpha = 0.5; // 50%
canvasContext.fillStyle = "rgba(" + red + "," + green + "," + blue + "," + alpha + ")";
// orange at half opacity

Answer 3

使用CSS，您可以设置img的位置和不透明度，那么为什么要使用canvas标签？答：有多个画布似乎没有效果，但是我们只在每个画布上显示1个图像，B如果它提供了你想要的输出，那么我只会坚持使用一个画布。

使用一个画布的例子1：https://jsfiddle.net/CanvasCode/jae7snxh/

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var image1 = new Image();
image1.src = "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQRsJ_wNvd0PfISyPZ5a_QI3Dpeo0g4T5Tuk-R26JXPxfhyFxBTVQ";
var image2 = new Image();
image2.src = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQQqnYE7Xtre5W0seeFETl00OPSGoujI6xUOHr18GzB4hJE5bCIaQ";
var image3 = new Image();
image3.src = "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRkg3mvI5DwGqG9AUmOEVU6bDDQgM6fT7nQKr8D7XwbQ59lxDiVlA";

context.fillStyle = "#FF0000";
context.fillRect(0,0,500,400);

// Save original state of the context settings
context.save();
context.globalAlpha = 0.8;
context.drawImage(image1, 0, 0);

context.globalAlpha = 0.3;
context.drawImage(image2, 0, 0);

context.globalAlpha = 0.5;
context.drawImage(image3, 0, 0);
context.restore();
// Restore original state of the context settings

Chrome网络显示需要334MS

多个画布示例：https://jsfiddle.net/CanvasCode/jae7snxh/3/

var canvas1 = document.getElementById('canvas1');
var context1 = canvas1.getContext('2d');
var canvas2 = document.getElementById('canvas2');
var context2 = canvas2.getContext('2d');
var canvas3 = document.getElementById('canvas3');
var context3 = canvas3.getContext('2d');

var image1 = new Image();
image1.src = "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQRsJ_wNvd0PfISyPZ5a_QI3Dpeo0g4T5Tuk-R26JXPxfhyFxBTVQ";
var image2 = new Image();
image2.src = "https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQQqnYE7Xtre5W0seeFETl00OPSGoujI6xUOHr18GzB4hJE5bCIaQ";
var image3 = new Image();
image3.src = "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRkg3mvI5DwGqG9AUmOEVU6bDDQgM6fT7nQKr8D7XwbQ59lxDiVlA";

context1.globalAlpha = 0.8;
context1.drawImage(image1, 0, 0);

context2.globalAlpha = 0.3;
context2.drawImage(image2, 0, 0);

context3.globalAlpha = 0.5;
context3.drawImage(image3, 0, 0);

Chrome网络显示需要334MS

一页上有多个HTML5画布

3 个答案: