我即将在HTML5 Canvas中实现类似Photoshop的图层。目前我有两个想法。第一个也许更简单的想法是为每个层设置一个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>
这种方式当你绘制到一个图层时 - 它实际上会转到那个“图层”。可以在下面的图层(画布)中看到具有透明位置的图层。层堆叠由z-index
属性控制。
第二个想法是使用单个Canvas元素并实现一些逻辑来处理层,就像这样:
<!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>
在上面的代码中,两层将每200毫秒更改堆叠顺序。
所以,问题是哪种方式最好?两种方法的优点和缺点是什么?
答案 0 :(得分:26)
如果您想使用单个canvas元素并在其中包含多个图层,您可能需要查看我的库:
它使用损坏的rect系统来减少每次画布更改时重绘的次数,因此不仅可以获得图层(可以嵌套),还可以获得优化的重绘。
这是一个简单的演示:
答案 1 :(得分:21)
使用多个画布应该更快,因为画布会在屏幕外绘制,然后通过浏览器进入屏幕。你把交换图层的负担放在浏览器上,只需移动一些图形数据矩形。
如果您自己进行分层,则可以获得更多控制权,但JS和JS引擎的负担是完成所有工作。如果我有选择的话,我会避免这种情况,但是如果你想要在底层使用的图层效果,这可能是你唯一的选择。
答案 2 :(得分:2)
设置容器div相对应该阻止了该层覆盖问题。尝试在“被遮挡的文本”上设置位置 - 例如如果它目前是绝对的,它将显然与相对的东西的左上角相同。
它可能很明显但是,按照html中div的顺序,你可以消除z轴的使用。如果你希望你的东西是通用的(对于其他开发人员也是如此),使用z轴但是存储你添加图层索引的基线(这样当使用其他代码以有问题的方式使用z轴时可以调整基线)。
答案 3 :(得分:1)