如何使用HTML畫布繪製任意形狀？

我想畫上一個HTML畫布此表狀：如何使用HTML畫布繪製任意形狀？

0 

100          . 
             . 
200        .  . 
             . 
300      .    . 
             . 
400  .  .      . 
             . 
500  .................................

我看不出什麼毛病我圖形的座標：

(0, 500), (0, 400), (100, 400), (200, 300), (300, 200), (400, 100), (400, 500)

HTML/JS：

<html> 
    <head> 
     <script type="text/javascript"> 
      function drawSteps(heights) { 
       var y = 500; 
       var steps = document.getElementById('steps').getContext('2d'); 
       steps.fillStyle = '#C3EDBD'; 
       steps.beginPath(); 
       steps.moveTo(0, y); 

       var x = 0; 
       for (var i = 0; i < heights.length; i++) { 
        console.log(x.toString() + ', ' + (y - heights[i]).toString()); 
        steps.lineTo(x, y - heights[i]); 
        x += 100; 
       } 

       steps.lineTo(x, 500); 
       steps.lineTo(0, 500); 
       steps.closePath(); 
       steps.fill(); 
      } 
     </script> 
    </head> 
    <body> 
     <canvas id="steps"></canvas> 
     <script type="text/javascript"> 
      drawSteps([100, 100, 200, 300, 400]); 
     </script> 
    </body> 
</html>

沒有打印在屏幕上，但畫布消耗了300x150px的佔位符。

來源

2016-07-24 fips

它被繪製，但您的畫布太小，所以您沒有看到它（默認情況下爲300 x 150像素）。

畫布更改爲：

<canvas width=500 height=500 id="steps"></canvas>

，你會看到結果。

參見DEMO。

請注意，使用CSS調整大小將不起作用，因爲您的畫布仍然具有300 x 150像素的默認值，但拉伸至您在CSS中定義的尺寸。

請參閱this demo以比較畫布的HTML與CSS大小。

來源

2016-07-24 23:26:14 rsp

這是非常有幫助的感謝！ – fips

你只需要定義的寬度和高度爲你的畫布

<canvas id="steps" width="1000" height="1000"></canvas>

它可能會更好用CSS來做到這一點，但是這是一個快速解決您的問題

來源

2016-07-24 23:28:15 Joundill

如何使用HTML畫布繪製任意形狀？

回答

相關問題