Wie zeichne ich eine beliebige Form mit HTML-Canvas?

Ich versuche, diese Grafik ähnliche Form auf einer HTML-Leinwand zu zeichnen:Wie zeichne ich eine beliebige Form mit HTML-Canvas?

0 

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

ich meine Form des nicht-Koordinaten etwas falsch mit sehen können:

(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>

Nichts wird auf dem Bildschirm gedruckt, aber Leinwand verbraucht einen 300x150px Platzhalter.

Quelle

2016-07-24 fips

Es ist gezeichnet, aber Ihre Leinwand ist zu klein, so dass Sie es nicht sehen (300 x 150 Pixel standardmäßig).

Ihre Leinwand ändern:

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

und Sie werden sehen, das Ergebnis.

Siehe DEMO.

Beachten Sie, dass die Größenanpassung mit CSS nicht funktioniert, da Ihre Arbeitsfläche immer noch den Standardwert von 300 x 150 Pixeln hat, aber auf Ihre in CSS definierten Dimensionen gestreckt wird.

Siehe this demo, um die HTML- oder CSS-Größe von Canvas zu vergleichen.

Quelle

2016-07-24 23:26:14 rsp

Das war sehr hilfreich Dank! – fips

Sie brauchen nur eine Breite und Höhe für Ihre Leinwand

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

Es ist wahrscheinlich besser zu definieren, diese mit CSS zu tun, aber das ist eine schnelle Lösung für Ihr Problem

Quelle

2016-07-24 23:28:15 Joundill

Wie zeichne ich eine beliebige Form mit HTML-Canvas?

Antwort

Verwandte Themen