我即將在HTML5畫布中實現Photoshop般的圖層。目前我有兩個想法。第一個也許更簡單的想法是為每個圖層設置一個Canvas元素，如：

這樣當你畫到一個圖層 – 它實際上是去“層”。具有透明位置的層可以通過下面的層(Canvases)看到。層疊疊由z-index屬性控制。

第二個想法是使用單個Canvas元素并實現一些邏輯來處理像這樣的層：

Test

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);

在上面的代碼中，兩層將每隔200ms更改堆疊順序。

那么問題是哪個方式是最好的方法？這兩種方法的優點和缺點是什么？

總結

以上是生活随笔為你收集整理的怎样在html中实现图层重叠,javascript – 在HTML5画布中实现图层的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。