HTML5: Mit Canvas malen

Aufgabenstellung

In einem HTML 5 Canvas soll über JavaScript-Events die Mausposition ausgelesen, und an dieser gemalt werden.

Ansatz

Verwendung der Events onmousedown, onmouseup, onmousemove des Canvas-Elements. Nutzung der clientX- und clientY-Eigenschaft

Prämissen / Vorraussetzungen

Es wird ein aktueller Browser verwendet, der das HTML 5 Canvas-Element unterstützt.

Lösung

<html>
<head>
<script>
	function draw() {
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		ctx.fillStyle = "black";
		ctx.beginPath();
		var x;
		var y;
		canvas.onmousedown = function(e) {
			x = e.clientX;
			y = e.clientY;
			ctx.moveTo(x, y);
		}
		canvas.onmouseup = function(e) {
			x = null;
			y = null;
		}
		canvas.onmousemove = function(e) {
			if (x == null || y == null) {
				return;
			}
			x = e.clientX;
			y = e.clientY;
			x -= canvas.offsetLeft;
			y -= canvas.offsetTop;
			ctx.lineTo(x, y);
			ctx.stroke();
			ctx.moveTo(x, y);
		}
	};
</script>
</head>
<body onload="draw();">
	<canvas id="canvas" width="300" height="300"
		style="border: 1px solid black;"></canvas>
</body>
</html>

Über Björn Karpenstein

Diplom Informatiker, Programmierer, Musikbegeisterter
Dieser Beitrag wurde unter HTML/CSS veröffentlicht. Setze ein Lesezeichen auf den Permalink.

2 Responses to HTML5: Mit Canvas malen

  1. Martin sagt:

    Hi,

    cooles Skript. Direkt ausprobiert und funktioniert fast einwandfrei.
    Hast du eine Idee, weshalb der Browser immer einen seitwärts Strich zeichnet, bevor er die Bewegung zeichnet?
    VG Martin

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.