2013-02-14 82 views
0

我正在建立HTML5 Canvas上的旋轉超立方體,但在此之前,我正在使用Canvas獲得基本難度。我有一個白色/無色的畫布,我試圖在將fillStyle和strokeStyle設置爲'#000000'之後畫線,並且我還沒有成功地使畫布上的任何像素顯示爲白色以外的其他像素。爲什麼帆布線不可見?

畫布位於http://blajeny.com/tesseract.html,作爲部分數學和部分老式JavaScript的JavaScript,位於http://blajeny.com/js/tesseract.js。日誌說,它在畫布上畫線,其中一些應該與500x500的畫布相交,其中一些應該完全躺在畫布內,但我所看到的只是純白色的。

它的數學方面需要根據從較高維到較低維表面的投影進行工作。然而,我現在試圖解決的困難是一個基本的HTML5畫布問題,因爲我正在設置一種顏色,移動到並繪製一條線以協調其中一些重疊,其中一些位於500x500畫布內,而沒有看到任何轉動黑色。 (JavaScript控制檯記錄我正在繪製的線條)。

如何獲取我想要顯示的線條?

回答

2

當你使用context.beginPath()和context.stroke()/ context.fill()來啓動和停止繪圖時,你需要讓畫布知道。這裏的代碼和一個小提琴:http://jsfiddle.net/m1erickson/Jw8XU/

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     canvas{border:1px solid red;} 
    </style> 
    </head> 
    <body> 
    <canvas id="canvas" width="300" height="300"></canvas> 
    <script> 
     var canvas = document.getElementById('canvas'); 
     var ctx = canvas.getContext('2d'); 

     ctx.beginPath(); 
     ctx.moveTo(50, 75); 
     ctx.lineTo(150, 150); 
     ctx.stroke(); 
    </script> 
    </body> 
</html> 
+0

現在線顯示出來。謝謝! – JonathanHayward 2013-02-14 19:21:33

+0

我發現工作代碼,現在在http://Blajeny.com可見。謝謝。 – JonathanHayward 2013-02-15 21:12:42