Tow*_*wer 23 javascript html5 canvas
我即将在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毫秒改变堆叠顺序.
那么,问题是哪种方式最好？这两种方法的优点和缺点是什么？
Ant*_*Ant 26
如果要使用单个canvas元素并在其中包含多个图层,则可能需要查看我的库:
它使用损坏的rect系统来减少每次画布更改时重绘的次数,因此不仅可以获得图层(可以嵌套),还可以获得优化的重绘.
这是一个简单的演示:
moe*_*fju 21
使用多个画布应该更快,因为画布会在屏幕外绘制,然后通过浏览器进入屏幕.你把交换图层的负担放在浏览器上,只需要移动一些图形数据矩形.
如果您自己进行分层,则可以获得更多控制权,但JS和JS引擎的负担是完成所有工作.如果我有一个选择,我会避免这种情况,但是如果你想要在底层使用的图层效果,这可能是你唯一的选择.
| 归档时间： |
|
| 查看次数： |
49339 次 |
| 最近记录： |