HTML5畫布drawImage（）函數

我想旋轉一個map.I在隱藏的畫布上繪製地圖，之後我旋轉從另一個畫布獲取畫布畫布。我實施了前三個步驟（繪製隱藏，旋轉，翻譯），但我不能最後一個步驟。你能幫我嗎？這裏是我的源代碼：HTML5畫布drawImage（）函數

var visibleCanvas = document.getElementById("VisibleCanvas"); 
var visibleCtx = visibleCanvas.getContext("2d"); 
visibleCtx.translate(400,300); 
visibleCtx.rotate(Math.PI); 
visibleCtx.drawImage(c,-400,-300,800,600);

c是我隱藏canvas.I嘗試了很多方法來繪製地圖，但我不能讓它（如dataURL等）

來源

2013-08-29 mekafe

下面是如何畫從一個帆布到另一個具有180度翻轉

enter image description here

// save the visibleCtx in it's unrotated state 
visibleCtx.save(); 

// rotate the visible canvas 180 degrees around its centerpoint 
visibleCtx.translate(400,300); 
visibleCtx.rotate(Math.PI); 
visibleCtx.drawImage(c,-400,-300); 

// restore the state of visibleCtx to its unrotated state for future drawings 
visibleCtx.restore()

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/2scrB/

<!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> 
    body{ background-color: ivory; padding:10px;} 
    #c{border:3px solid red;} 
    #VisibleCanvas{border:3px solid green;} 
</style> 

<script> 
$(function(){ 

    var c=document.getElementById("c"); 
    var cCtx=c.getContext("2d"); 

    var visibleCanvas = document.getElementById("VisibleCanvas"); 
    var visibleCtx = visibleCanvas.getContext("2d"); 

    var img=new Image(); 
    img.onload=function(){ 

     cCtx.drawImage(img,0,0); 

     // note the image being rotated is 400x234 
     // so our transformation point is 200x117 
     visibleCtx.save() 
     visibleCtx.translate(200,117); 
     visibleCtx.rotate(Math.PI); 
     visibleCtx.drawImage(c,-200,-117); 
     visibleCtx.restore(); 
    } 
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/faces.png"; 


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

</head> 

<body> 
    <p>Offscreen</p> 
    <canvas id="c" width=400 height=234></canvas> 
    <p>Visible</p> 
    <canvas id="VisibleCanvas" width=400 height=234></canvas> 
</body> 
</html>

來源

2013-08-29 14:53:04 markE

謝謝advice.But它沒有工作。我試圖畫一個隱藏的畫布。因此，我的代碼中沒有圖像，這可能是問題嗎？ – mekafe

無論您是使用上下文線條/曲線/等等繪製圖像還是繪製地圖，代碼都是相同的（並且確實有效）。正如我的答案中指出的......確保你的context.drawImage（c，-400，-300） - 假設你的屏幕外畫布是800x600。 – markE

我發現了問題。我有異步操作來繪製hiddenCanvas.So我需要回調函數來旋轉該canvas.Thank所有幫助。有一個愉快的一天。 – mekafe

如果我。正確理解問題，你想：

在隱藏的畫布上繪製地圖;
旋轉可見畫布;和
將地圖從隱藏的畫布複製到可見的畫布？

假設你的可見帆布具有寬度= 800和高度= 600 ...

var visibleCanvas = document.getElementById("VisibleCanvas"); 
var visibleCtx = visibleCanvas.getContext("2d"); 
visibleCtx.translate(400,300); 
visibleCtx.rotate(Math.PI);

返回畫布座標網格到其原始位置

visibleCtx.translate(-400,-300);

的的drawImage命令有格式：

destinationContext.drawImage（sourceElement，sourceX，sourceY，sourceWidth，sourceHeight，destX，destY，destWidth， destHeight）;

...因此「visibleCtx.drawImage（c，-400，-300,800,600）;」正在告訴畫布使用座標（-400，-300）來複制源 - 它位於隱藏畫布之外。

相反，使用這樣的：

visibleCtx.drawImage(c,0,0,800,600);

因爲可見的畫布座標系原點已經設置回左上角，你不想來調整複印的圖像，你不」不必擔心目的地價值。

來源

2013-08-29 09:40:14 KaliedaRik

是的，你明白正確的事情。謝謝advices.i實施他們到我的代碼，但它沒有再次工作。我忽視任何其他的東西？ – mekafe

HTML5畫布drawImage（）函數

回答

相關問題