<canvas>

Elementet <canvas> skapar en rityta och kan med hjälp av ett skriptspråk, så som Javascript, användas för att rendera diagram, webbläsarspel eller annan typ av grafik.



<canvas id="diagram" width="375" height="205"></canvas>

<script>
var canvas = document.getElementById( 'diagram' );
var context = canvas.getContext( '2d' );

//X- och Y-axel
context.beginPath();
context.moveTo( 25, 5 );
context.lineTo( 25, 200 );
context.lineTo( 350, 200 );
context.stroke();

context.beginPath();
context.lineWidth=1;
context.fillStyle="#ccc";
context.fillRect( 50, 45, 30, 154 );
context.fillText( "155", 45, 40 );

context.beginPath();
context.lineWidth=1;
context.fillStyle="#ccc";
context.fillRect( 100, 75, 30, 124 );
context.fillText( "125", 100, 70 );

context.beginPath();
context.lineWidth=1;
context.fillStyle="#ccc";
context.fillRect( 150, 105, 30, 94 );
context.fillText( "95", 150, 100 );

context.beginPath();
context.lineWidth=1;
context.fillStyle="#ccc";
context.fillRect( 200, 80, 30, 119 );
context.fillText( "120", 200, 75 );

context.beginPath();
context.lineWidth=1;
context.fillStyle="#ccc";
context.fillRect( 250, 75, 30, 124 );
context.fillText( "125", 250, 70 );

context.beginPath();
context.lineWidth=1;
context.fillStyle="#ccc";
context.fillRect( 300, 45, 30, 154 );
context.fillText( "155", 300, 40 );

var yScale = 20;

for( i = yScale; i < 200; i = i + yScale ) {
context.beginPath();
context.moveTo( 22, i );
context.lineTo( 28, i );
context.stroke();context.fillText( i , 1, 200 - i + 5 );
}
</script>

Kommentera

E-postadressen publiceras inte. Obligatoriska fält är märkta *