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.
Ritbordet är en rektangulär area där du kan styra varje pixel.
Canvas har flera ritarvä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 hjälp av JavaScript
canvas-elementet har ingen ritningsförmåga i sig själv. Allt ritningsarbete måste utföras internt i 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");
Sedan skapar du 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 med rött, fillRect-metoden specificerar form, position och storlek.
Förstå koordinater
FillRect-metoden har parametrarna (0,0,150,75).
Det innebär: Rita en rektangel med dimensionerna 150x75, 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定位ritning på canvas.
Exempel: Håll muspekaren över rektangeln för att se koordinaterna
Mer Canvas-exempel
Följande är fler exempel på ritning 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 storlek, färg och position:
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 specificerat för att rita 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
