帆布內部的帆布html5

我們可以在現有畫布內放置畫布嗎？如果可以，請幫助在html5中完成。帆布內部的帆布html5

2012-07-24 Villan

請提供更多的細節，你真的想要完成什麼。 – Phrogz 2012-07-24 15:16:55

有兩種可能的方法來解釋你的問題。其中之一是，你的意思是真正巢canvas元素本身，就像這樣：

<canvas id="outer"> 
    <canvas id="inner"></canvas> 
</canvas>

這是合法的（根據validator.nu），但毫無意義。 canvas元素中的內容用於回退。使用canvas元素內容的唯一方法是如果瀏覽器不支持canvas，在這種情況下內部canvas元素將不會被看到。

解釋您的問題的另一種可能方法是，您可以在一個畫布上顯示另一個畫布上顯示的圖像。這很簡單，canvas元素可以用作context.drawImage()的第一個參數。如果你有兩個canvas元素：

<canvas id="c1" width="200" height="200"></canvas> 
<canvas id="c2" width="200" height="200"></canvas>

然後this script (using jQuery)將借鑑第一canvas，然後添加四倍的圖像到第二canvas：

var c1 = $('#c1'); 
var ctx1 = c1[0].getContext('2d'); 

ctx1.fillRect(50,50,100,100); 

var c2 = $('#c2'); 
var ctx2 = c2[0].getContext('2d'); 

ctx2.drawImage(c1[0],0,0,100,100); 
ctx2.drawImage(c1[0],100,0,100,100); 
ctx2.drawImage(c1[0],0,100,100,100); 
ctx2.drawImage(c1[0],100,100,100,100);

但同樣，爲什麼你會嗎？您可以複製上方just using one第二canvas的圖像：

var c1 = $('#c1'); 
var ctx1 = c1[0].getContext('2d'); 

ctx1.fillRect(25,25,50,50); 
ctx1.fillRect(125,25,50,50); 
ctx1.fillRect(25,125,50,50); 
ctx1.fillRect(125,125,50,50);

因此，在總結：是的，這是可能的，但它是不是真的有必要在使用簡單。

來源

2012-07-24 13:18:44 robertc

使用第二個畫布有很多（不可忽視的）原因。例如，通過將圖形複製到另一個離屏畫布，清除主畫布，然後將離屏畫布向左偏移一個像素並在缺失列中繪製新數據，最容易完成繪製移動圖形。（這隻有在圖形的背景是透明的時候纔是必需的。） – Phrogz 2012-07-24 13:46:20

@Progrog是的，也是各種圖像處理的東西。但我堅持我的「這不是簡單的使用必要」，我不認爲任何這些東西都與這個問題或這個答案有關。 – robertc 2012-07-24 14:05:27

也許不是，但是一個新手可能會認爲這是過度的，因爲這往往是完成某件事的整潔和更優化的方式。如果你有一個帶有靜態元素（比如說一個遊戲）的變化畫布，這種技術會帶來巨大的性能優勢 - 你只需要將位圖/矢量繪製到畫布上，然後在更新時將其繪製到主畫布上。 +1雖然答案很好。 – MickMalone1983 2012-10-24 22:55:50

在另一個畫布內嵌入畫布絕對沒有意義。如果瀏覽器不支持canvas，頁面只會看到canvas標籤內的內容。所以，只要做一下羅伯特說的：
<canvas id="background">fallbacks/polyfills go in here...</canvas> <canvas id="foreground">.. or here, but not other canvases.</canvas>

來源

2015-09-27 16:14:09 DUUUDE123

帆布內部的帆布html5

回答

相關問題