在一个页面上多个HTML5画布

Question

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

我应该在一个页面上有多个画布元素，然后position: absolute;他们在彼此之上或尝试别的？

只是想知道A.表现和B.是否在语义上是正确的？谢谢。

Answer 1

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

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

不是在canvas元素上设置CSS不透明度，而是在绘制时使用canvas属性上的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 2

您可以在同一画布上绘制图像。
只需在绘制图像之前更改.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 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 

铬网络示出它需要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); 

铬网络示出它需要334MS