Je suis sur le point d'implémenter des calques de type Photoshop dans HTML5 Canvas. Actuellement, j'ai deux idées. La première et peut-être l'idée plus simple est d'avoir un élément de toile pour chaque couche comme:Implémentation de calques dans HTML5 Canvas
<canvas id="layerName" width="320" height="240" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
<canvas id="layerName" width="320" height="240" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
<canvas id="layerName" width="320" height="240" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
De cette façon, lorsque vous dessinez à une couche - il va en fait à cette « couche ». Les couches avec des positions transparentes peuvent être vues à travers des couches inférieures (Toiles). L'empilement des calques est contrôlé avec la propriété z-index.
La deuxième idée est d'utiliser un seul élément de toile et mettre en œuvre une certaine logique pour traiter des couches comme dans ce cas:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script>
window.addEventListener('load', function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var order = 0;
function drawLayer1() {
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
}
function drawLayer2() {
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
function draw() {
ctx.clearRect(0, 0, 256, 256);
if (order === 0) {
drawLayer1();
drawLayer2();
}
else {
drawLayer2();
drawLayer1();
}
}
setInterval(draw, 250);
setInterval(function() {
order = 1 - order;
}, 200);
}, false);
</script>
</head>
<body>
<canvas id="canvas" width="256px" height="256px"></canvas>
</body>
</html>
Dans le code ci-dessus les deux couches changeront l'ordre d'empilement tous les 200 ms. Donc, la question est de savoir quelle serait la meilleure façon de faire? Quels sont les avantages et les inconvénients des deux approches?
Cela semble génial! Merci de partager votre travail. :) –
Lien est cassé ... – Tek
@Tek: Merci! Lien fixe. – Ant