一页上有多个 HTML5 画布

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 标签呢？ A：拥有多个画布似乎没有效果，但是我们只在每个画布上显示 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 网络显示需要 334 毫秒

多个画布示例：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 网络显示需要 334 毫秒