2012-12-24 28 views
0

將HTML畫布設置爲特定尺寸(例如800x600)後,該腳本將無法填充,但如果將其設置爲150x150,則會將其填充。爲什麼會發生?它可以修復嗎?任何幫助,將不勝感激。如果尺寸太大,畫布無法執行填充

HTML:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Let's Draw!</title> 
     <link rel="stylesheet" type="text/css" href="style.css" /> 
     <script type="text/javascript" src="script.js"></script> 
    </head> 
    <body onload="drawShape();"> 
     <canvas id="my_canvas" width="800" height="600"> 
      This text is displayed if your browser does not support HTML5 Canvas. 
     </canvas> 
    </body> 
</html> 

的Javascript:

function drawShape(){ 
    var canvas = document.getElementById('my_canvas'); 

    if (canvas.getContext){ 

     var ctx = canvas.getContext('2d'); // ctx = context 

     ctx.fillStyle = "red"; 

     // Filled triangle 
     ctx.beginPath(); 
     ctx.moveTo(25,25); 
     ctx.lineTo(105,25); 
     ctx.lineTo(25,105); 
     ctx.fill(); 

     // Stroked triangle 
     ctx.beginPath(); 
     ctx.moveTo(125,125); 
     ctx.lineTo(125,45); 
     ctx.lineTo(45,125); 
     ctx.closePath(); 
     ctx.stroke(); 

    } else { 
     alert('You need Safari or Firefox 1.5+ to see this demo.'); 
    } 
} 
+1

http://jsfiddle.net/loktar/P72UH/適合我 – Loktar

+0

但不適合我。我認爲canvas元素的像素或大小限制有限,對於不同的設備和計算機可能不同? –

+1

我認爲這是我的答案:http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element –

回答

0

800x600的是比較小的,應該由支持畫布外的所有合理的瀏覽器都支持。尺寸4倍的畫布應該可以工作。你使用什麼瀏覽器/操作系統?