Несколько холстов HTML5 на одной странице

Question

Итак, у меня есть canvas, который я хочу нарисовать на несколько изображений, а затем сложить их; у первого изображения было бы opacity: 0.5; изображение два было бы opacity: 0.7, а затем третье - opacity: 0.3;. Мой вопрос.

Должен ли я иметь несколько элементов холста на одной странице, а затем position: absolute; их друг на друга или попробовать что-то еще?

Просто интересно A. Производительность и B. это семантически правильно? Благодарю.

Answer 1

Да, несколько элементов холста друг на друга - это хороший способ добиться наслаивания. Хотя, конечно, я бы придерживался только двух или трех, по соображениям производительности, если вы не знаете, что ваш сайт будет просматривать только браузеры/процессоры. Если вы не возражаете потерять слоирование на выходе, вы можете просто использовать один скрытый холст в качестве кеша для подготовки чертежа, а затем скопировать каждый слой поверх этого на другой холст, который вы показываете.

Если вы используете несколько элементов, вы можете поместить их в оболочку div или что-то подобное для лучшей организации. Обратите внимание, что полотна прозрачны по умолчанию: другими словами, вы можете видеть, что под ними, пока вы не нарисуете то, что хотите увидеть или установить цвет фона.

Вместо того, чтобы устанавливать непрозрачность CSS на элементы вашего холста, используйте вместо этого свойство javascript globalAlpha в контексте вашего холста при рисовании; или установить альфа как 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, так почему вы хотели бы использовать холст тег? A: Имея несколько холстов, похоже, не имеет эффекта, однако мы показываем только 1 изображение на каждом холсте, B Ну, если он обеспечивает вывод, который вы хотите дать, однако я бы просто придерживался одного холста.

Exmaple 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