繪製到另一個畫布不工作的畫布

我想繪製通過JavaScript在另一個畫布上創建的畫布。但它不是爲我工作，繪製到另一個畫布不工作的畫布

這裏是我的代碼，

<!DOCTYPE HTML> 
<html> 
    <head> 
    </script> 
     <script> 
     window.onload = function(){ 
     var can1 = document.createElement('canvas'); 
     can1.width = 150; 
     can1.height = 140; 
     can1.style.cssText = 'top:2px;left:2px;border:2px solid black;'; 

     var ctx1 = can1.getContext('2d'); 
     var img=new Image(); 
     img.src="images/211.jpg" 
     ctx1.drawImage(img,0,0); 

     var can = document.getElementById("c"); 
     var ctx = can.getContext('2d'); 
     ctx.drawImage(can1,0,0); 
     var canvas = document.getElementById("c"); 
     window.open(canvas.toDataURL()); 
     } 

    </script> 
</head> 
<body > 
    <canvas id="c" style = "position:absolute;top:150px;width:250px;height:350px;left:500px; border:2px solid black;"></canvas> 
</body> 
</html>

來源

2012-07-12 MJQ

爲什麼你認爲它不起作用？順便說一句，你沒有吸取任何東西進入can1。 – Bergi 2012-07-12 10:54:09

我試圖通過將圖像繪製成can1。仍然在上面的代碼中，畫布的邊界應該出現！ – MJQ 2012-07-12 10:56:05

「界限」是什麼意思？如果沒有內容，則不會繪製內容，並且邊框不屬於內容。 – Bergi 2012-07-12 11:09:46

我認爲問題在於，當您試圖將該圖像繪製到畫布中時，圖像尚未準備好。所以如果你這樣做，它完美的作品：

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
     #myCanvas { 
     border: 1px solid #9C9898; 
     } 
    </style> 
    <script> 
     window.onload = function() { 

     var imageObj = new Image(); 
     imageObj.src = "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg"; 

     var dynamicCanvas = document.createElement("canvas"); 
     var dynamicContext = dynamicCanvas.getContext("2d"); 
     dynamicCanvas .height="400"; 
     dynamicCanvas.width="578"; 

     var canvas = document.getElementById("myCanvas"); 
     var context = canvas.getContext("2d"); 

     imageObj.onload = function() { 
      dynamicContext.drawImage(imageObj, 69, 50); 
      context=context.drawImage(dynamicCanvas,69,50); 
      window.open(canvas.toDataURL()); 
     }; 
     }; 

    </script> 
    </head> 
    <body> 
    <canvas id="myCanvas" width="578" height="400"></canvas> 
    </body> 
</html>

，你可以調整動態畫布的高度和寬度。

如果你刪除那個window.open語句，它的完美。

但與canvas.toDataURL()

當您嘗試本地文件做canvas.toDataURL()一個問題，它提供了一個安全的錯誤（如果你檢查它通過谷歌瀏覽器），即

Uncaught Error: SECURITY_ERR: DOM Exception 18

可以知道更多關於這個錯誤：here （看看你是否得到這個錯誤）。無論如何，根本原因是整理出來的，現在有一個新的問題：D..anyways更好的運氣！

來源

2012-07-12 13:50:00

你在服用什麼？你的代碼正在工作。

（如果我正確地得到您的問題），我添加以下行

can1.style.cssText='border:2px solid black;';

後：

 var ctx1 = can1.getContext('2d'); 
     ctx1.rect(50, 50, 500, 500); 
     ctx1.fillStyle = '#8ED6FF'; 
     ctx1.fill();

，並在執行時，我看到裏面一個美麗的矩形！你使用html5支持瀏覽器嗎？

來源

2012-07-12 10:55:28

好的。我試過了，它工作正常。但是，如果我在畫布上繪製圖像並將該畫布繪製到另一個上，則不會顯示！ – MJQ 2012-07-12 11:02:54

請向我們展示該代碼（編輯您的問題）！ – Bergi 2012-07-12 11:10:32

好的。我已經更新了上面的代碼。圖像顯示但不正確。大小不顯示爲150,140。在window.open（canvas.toDataURL（））;當新選項卡打開時，它正確顯示！ – MJQ 2012-07-12 11:16:39

使用MJQ原始代碼的圖像顯示不正確的問題在於，他沒有直接通過屬性來聲明第二個畫布的大小 - 僅通過樣式。因此，瀏覽器創建了一個默認大小的畫布（FF爲300x150），然後將其拉伸至250x350。

所以下面的修改將解決圖像顯示：

<canvas id="c" width="250" height="350" style = "position:absolute;top:150px;width:250px;height:350px;left:500px; border:2px solid black;"></canvas>

也許這將幫助別人的未來。

來源

2014-06-25 10:21:54 kaigorodov

繪製到另一個畫布不工作的畫布

回答

相關問題