HTML5 Canvas
- Föregående sida HTML Input formulär egenskaper
- Nästa sida HTML5 SVG
Canvas-elementet används för att rita grafik på webbsidan.
Vad är Canvas?
HTML5:s canvas-element använder JavaScript för att rita bilder på webbsidan.
Canvas är en rektangulär area, där du kan styra varje pixel.
Canvas har flera ritvägar, rektanglar, cirklar, tecken och metoder för att lägga till bilder.
Skapa Canvas-element
Lägg till canvas-element till HTML5-sidan.
Definiera elementets id, bredd och höjd:
<canvas id="myCanvas" width="200" height="100"></canvas>
Rita med JavaScript
Canvas-elementet har ingen ritförmåga. Allt ritande måste göras inom JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript använder id för att hitta canvas-elementet:
var c=document.getElementById("myCanvas");
Skapa sedan context-objektet:
var cxt=c.getContext("2d");
getContext("2d")-objektet är ett inbyggt HTML5-objekt som har flera metoder för att rita vägar, rektanglar, cirklar, tecken och lägga till bilder.
Följande två rader ritar en röd rektangel:
cxt.fillStyle="#FF0000"; cxt.fillRect(0,0,150,75);
fillStyle-metoden färgar den röd, fillRect-metoden specificerar form, plats och dimensioner.
Förstå koordinater
Ovanstående fillRect-metoden har parametrarna (0,0,150,75).
Det innebär: Rita en rektangel på 150x75 på canvasen, börjar från övre vänstra hörnet (0,0).
Som visas i bilden nedan, används canvasens X- och Y-koordinater för att positionera konst på canvasen.
Exempel: När du håller muspekaren över rektangeln visas koordinaterna
Mer Canvas-exempel
Följande är fler exempel på att rita på canvas-elementet:
Exempel - Linje
Rita en linje genom att specificera start- och slutpunkt:
JavaScript-kod:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
canvas-elementet:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Din webbläsare stöder inte canvas-elementet. </canvas>
Exempel - Cirkel
Rita en cirkel genom att specificera dimensioner, färg och plats:
JavaScript-kod:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
canvas-elementet:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Din webbläsare stöder inte canvas-elementet. </canvas>
Exempel - Gradient
Använd den färg du har specificerat för att ritas en gradientbakgrund:
JavaScript-kod:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
canvas-elementet:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Din webbläsare stöder inte canvas-elementet. </canvas>
Exempel - Bild
Placera ett bild på canvasen:
JavaScript-kod:
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
};
</script>
canvas-elementet:
<canvas id="myCanvas" width="244" height="182" style="border:1px solid #d3d3d3;"> Din webbläsare stöder inte HTML5 canvas-taggen. </canvas>
HTML Canvas tutorial
För att lära sig mer om canvas, besök vår HTML Canvas tutorial.
- Föregående sida HTML Input formulär egenskaper
- Nästa sida HTML5 SVG
