一个页面上多个HTML5画布

Question

所以我有一个canvas，我想在上面绘制多个图像，然后将它们分层，所以第一张图片的透明度应该是0.5;第二张图片的透明度应该是0.7;第三张图片的透明度应该是0.3;。我的问题是：

我应该在一个页面上拥有多个canvas元素，然后使用position: absolute;将它们叠放在一起，还是尝试其他方法？

只是想知道A.性能和B.这是否符合语义要求？谢谢。

- pourmesomecode

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

可以直接翻译为：

{{链接1：fiddle}}

- Andreas

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

- user162097

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 毫秒

- Canvas