NemProgrammering.dk logo
nordicway webhotel

HTML5 canvas

HTML5 kursus | Lær at anvende HTML5
WordPress hjemmeside hjælp

Information om denne video

Underviser: Joakim Børlum Petersen, www.Snowhat.dk

I denne danske video guide fortæller Joakim om de nye muligheder med HTML5 canvas og hvordan du kan udnytte dem. Som eksempel laves der i videoen et canvas, hvor man ved hjælp af JavaScript kan få tegnet tilfældige cirkler og firkanter hver gang man genopfrisker sin browser. HTML5 canvas kan bruges til utroligt mange ting, og hvad Joakim viser er blot en demonstration af hvad der er muligt med nogle helt basale JavaScript funktioner. Canvas elementet kan i store træk betegnes som en interaktivt tegnebrak, hvor du løbende og ved hjælp af kaldte funktioner kan ændre på indholdet og dermed grafikken der vises på "tegnebrættet".

Herunder finder du koderne der bliver lavet i videoen - Kopier dem gerne!

Video tags:

Denne video relaterer til emner såsom: HTML5 kursus, HTML5 guide, Gratis HTML5 undervisning, HTML5 video tutorials på dansk, HTML5 introduktion, muligheder med HTML5, HTML5 - den nye standard, HTML5 canvas, HTML kanvas.

Her har du kildekoden

<!doctype html>
<html lang="da">
<head>
	<title>Vi leger med canvas</title>
	<meta charset="utf-8">
	
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
	
	<script src="canvas.js"></script>
</head>

<body>

	<canvas id="testCanvas" width="600px" height="400px"><p>Din browser understøtter ikke canvas-elementet</p></canvas>

</body>
</html>

JavaScriptet:

window.onload = function() {
	var canvas = document.getElementById("testCanvas");
	var context = canvas.getContext("2d");
	
	drawSquare(canvas, context);

	drawCircle(canvas, context);


	for (var squares = 0; squares < 20; squares++) {
		drawSquare(canvas, context);
	}
	for (var circles = 0; circles < 20; circles++) {
		drawCircle(canvas, context);
	}

};


function drawSquare(canvas, context) {
	var w = Math.floor(Math.random() * 40);
	
	var x = Math.floor(Math.random() * canvas.width);
	
	var y = Math.floor(Math.random() * canvas.height);
	
	context.fillStyle = "#BADA55";
	context.fillRect(x, y, w, w);
}


function drawCircle(canvas, context) {
	var radius = Math.floor(Math.random()*40);
	var x = Math.floor(Math.random() * canvas.width);
	var y = Math.floor(Math.random() * canvas.height);
	
	context.beginPath();
	context.arc(x, y, radius, 0, 2*Math.PI, true);
	
	context.fillStyle = "#242424";
	context.fill();
}

Spørgsmål og kommentarer

Har du spørgsmål eller kommentarer? Så skriv herunder og vi eller en anden lœser vil svare hurtigst muligt!

Url´er bliver automatisk omdannet til links (nofollow).

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Jonas    23-10-2023

Dette kursus giver ikke så meget mening, uden at have stiftet bekendtskab med Javascript, har jeg måtte sande. Måske det burde specificeres i introteksten til kurset :-)

kommentar på NemProgrammering.dk - lav din egen hjemmeside
ole olsen    11-12-2013

jeg har rettet i koden - se nedenfor - og nu virker - men tak for hjælpen alligevel <!doctype html> <html lang="da"> <head> <title>Vi leger med canvas</title> <meta charset="utf-8"> <style> canvas { border: 1px solid black; } </style> <script src="canvas.js"></script> </head> <body> <canvas id="testCanvas" width="1200px" height="600px"><p>Din browser understøtter ikke canvas-elementet</p></canvas> <script type="text/javascript"> window.onload = function() { var canvas = document.getElementById("testCanvas"); var context = canvas.getContext("2d"); drawSquare(canvas, context); drawCircle(canvas, context); for (var squares = 0; squares < 20; squares++) { drawSquare(canvas, context); } for (var circles = 0; circles < 20; circles++) { drawCircle(canvas, context); } }; function drawSquare(canvas, context) { var w = Math.floor(Math.random() * 40); var x = Math.floor(Math.random() * canvas.width); var y = Math.floor(Math.random() * canvas.height); context.fillStyle = "#B55A55"; context.fillRect(x, y, w, w); } function drawCircle(canvas, context) { var radius = Math.floor(Math.random()*40); var x = Math.floor(Math.random() * canvas.width); var y = Math.floor(Math.random() * canvas.height); context.beginPath(); context.arc(x, y, radius, 0, 2*Math.PI, true); context.fillStyle = "#BBBBBB"; context.fill(); } </script> </body> </html>

kommentar på NemProgrammering.dk - lav din egen hjemmeside
Thomas    10-12-2013

Hej Ole, Canvas er supporteret i Internet Explorer 9+, Firefox, Opera, Chrome, og Safari - så du burde være dækket ind med Firefox. Det er svært at sige, hvor det går galt. Hvis du opretter et indlæg på forum og vedlægger din kode kan vi kigge den igennem der :-) Mvh. Thomas

kommentar på NemProgrammering.dk - lav din egen hjemmeside
ole olsen    10-12-2013

Hvorfor kan jeg ikke få denne ting til at fungere i en browsser, den viser blot canvasset og derefter javascriptet i en lang tekst (jeg harprøvet explorer og firefox - jeg tror ikke, det er fordi js ikke virker, for jag har prøvet tutorial nr 1 (javascrpt) og den virker i begge browsere! -i øvrigt er jeres demoer vanskellge at læse - prøv selv