在HTML5画布中实现图层 [英] Implementing Layers in HTML5 Canvas
问题描述
我要在HTML5 Canvas中实现Photoshop类图层。目前我有两个想法。第一个也许更简单的想法是有一个Canvas元素为每一层像：
I am about to implement Photoshop-like Layers in HTML5 Canvas. Currently I have two ideas. The first and maybe the simpler idea is to have a Canvas element for each layer like:
<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 属性控制。
This way when you draw to a layer -- it actually goes to that "layer". Layers with transparent positions can be seen through to below layers (Canvases). Layer stacking is controlled with z-index property.
第二个想法是使用单个Canvas元素在这种情况下处理层的一些逻辑：
The second idea is to use a single Canvas element and implement some logic to handle layers like in this case:
<!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毫秒更改一次堆叠顺序。
In the above code the two layers will change stacking order every 200msec.
所以，问题是，哪种方式是最好的方法？
So, the question is that which way would be the best way? What are the pros and cons of both approaches?
推荐答案
如果要使用单个画布元素并在其中包含多个图层，您可能需要查看我的图书馆：
If you want to use a single canvas element and have multiple layers inside it, you might want to look at my library:
- http://bitbucket.org/ant512/canvaslayers/
它使用损坏的rect系统来减少金额
It uses a damaged rect system to reduce the amount of repainting done every time the canvas changes, so not only do you get layers (which can be nested), but you also get optimised redraws.
下面是一个简单的示例：
Here's a simple demo:
- http://simianzombie.com/media/2010/11/canvaslayers/canvaslayers.html
这篇关于在HTML5画布中实现图层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
