Html5 Canvas to Canvas Blit

我做了以下內容：

g_CanvasScreen = document.getElementById("m_Canvas"); 
g_CanvasScreenContext = g_CanvasScreen.getContext("2d"); 

g_OffScreenBackground = document.createElement("canvas"); 
g_OffScreenBackgroundContext = g_CanvasScreen.getContext("2d");

我相信這得從HMTL5頁面g_CanvasScreen主屏幕畫布。

我相信g_OffScreenBackground是一個新創建的內存中的畫布。

一旦所有圖像都加載，然後我通過調用函數畫在正確的地方，背景屏幕上的所有圖片：

DrawMapToBackground(g_OffScreenBackground, g_OffScreenBackgroundContext, 2000, 1600);

2000×1600的屏幕外背景的尺寸。

這會導致我不確定的事情。我相信，這將在位塊傳輸背景畫布到主屏幕：

g_CanvasScreenContext.drawImage(g_OffScreenBackground, 
    0, 0, g_OffScreenBackground.width, g_OffScreenBackground.height, 
    screenX, screenY, g_OffScreenBackground.width, g_OffScreenBackground.height);

這是最後一個函數是否正確？我可以做畫布來畫布嗎？我應該以另一種方式做這件事嗎？

來源

2013-05-30 Rewind

而不是每次重畫背景，只要把2個畫布放在彼此的頂部。

首先在底部畫布上繪製一次背景圖像。

然後使用頂部畫布繪製所有「更改」圖紙。

這裏的代碼和一個小提琴：http://jsfiddle.net/m1erickson/pSjEt/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
#container{ 
    position:relative; 
    border:1px solid blue; 
    width:500px; 
    height:300px; 
} 
.subcanvs{ 
    position:absolute; 
    width:100%; 
    height:100%; 
} 
</style> 

<script> 
$(function(){ 

    var bk=document.getElementById("background"); 
    var bkCtx=bk.getContext("2d"); 
    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var bkimg=new Image(); 
    bkimg.onload=function(){ 
     bk.width=bkimg.width; 
     bk.height=bkimg.height; 
     canvas.width=bkimg.width; 
     canvas.height=bkimg.height; 
     bkCtx.drawImage(bkimg,0,0); 
     draw(); 
    } 
    bkimg.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/skyGrass.png"; 

    var x=50; 

    function draw(){ 
     x+=5; 
     if(x>300){x=50;} 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     ctx.beginPath(); 
     ctx.arc(x,100,30,0,Math.PI*2,false); 
     ctx.strokeStyle="gold"; 
     ctx.fillStyle="yellow"; 
     ctx.lineWidth=5; 
     ctx.stroke(); 
     ctx.fill(); 
     setTimeout(draw,1000); 
    } 

}); // end $(function(){}); 
</script> 
</head> 

<body> 
    <div id="container"> 
     <canvas id="background" class="subcanvs"></canvas> 
     <canvas id="canvas" class="subcanvs"></canvas> 
    </div> 
</body> 
</html>

來源

2013-05-30 18:27:11 markE

這看起來像一個聰明的想法，但不幸的是我的正面和背面有畫布旋轉。 – Rewind

...並且最終它將僅僅是正在繪製的背景圖像的一部分，這取決於玩家的精靈在屏幕上的位置。 – Rewind

夠公平的。順便說一句，drawimage的最後4個參數用於移動和縮放屏幕畫布，因爲它正在繪製到前景圖像。通過提供screenX和screenY，實際上是將背景圖像移動到主畫布上的該座標（主畫布將不會有screenX或screenY以上的背景）。如果您不需要移動和縮放，請關閉最後4個參數。 – markE

Html5 Canvas to Canvas Blit

回答

相關問題