Mit HTML5 hält das <canvas> Element einzug in die Webentwicklung.
Dies dient dem dynamischen Zeichnen von Objekten wie Linien oder Rechtecken direkt im Browser per JavaScript.
Um nun einen Bereich auf einer Webseite zu erstellen mit dem man mit der Maus bzw. mit dem Finger (bei IOS oder Androidgeräten) freihand zeichnen kann, geht man wie folgt vor
1. Schritt: Canvas in HTML
Zunächst legt man in seinem HTML Code ein Canvas Element fest:
<html>
<head></head>
<body>
<canvas id="myCanvas" width="300" height="200">
Fallback content, in case the browser does not support Canvas.
</canvas>
</body>
</html>
Damit wird ein 300×200 Pixel grosser Canvas bereich angelegt. Über die ID finden wir das Element später im JavaScript wieder.
2. Schritt: Canvas initialisieren
Zunächst muss das <canvas> Element initialisiert werden
function initCanvas() {
// Get a reference to the element.
canvas = document.getElementById('myCanvas');
// Always check for properties and methods, to make sure your code doesn't break
// in other browsers.
if (canvas && canvas.getContext) {
// Get the 2d context.
// Remember: you can only initialize one context per element.
context = canvas.getContext('2d');
if (context) {
context.lineCap = "round";
//Fill it with white background
context.save();
context.fillStyle = '#fff';
context.fillRect(0, 0, context.canvas.width, context.canvas.height);
context.restore();
context.lineWidth = 5;
context.strokeStyle = "#000";
//enable mouse events
canvas.onmousedown = enableDraw;
canvas.onmouseup = disableDraw;
//touch events
canvas.addEventListener('touchstart', enableDraw, false);
canvas.addEventListener('touchend', disableDraw, false);
canvas.addEventListener('touchmove', draw, false);
}
}
}
- Zeile 13-18: Einstellen der Linienbreite und -farbe sowie das füllen des canvas mit einem weissen hintergrund.
- Zeile 21+22: Binden der Mausevents an das canvas für normale Browser
- Zeile 25-27: Binden der Touchevents an das canvas für Touchgeräte (IOS/Android)
3. Schritt: Zeichenfunktionen
function draw(e) {
e.preventDefault();
if (e.targetTouches)
event = e.targetTouches[0];
else
event = e;
context.lineTo(event.pageX, event.pageY);
context.stroke();
}
function enableDraw(e) {
e.preventDefault();
if (e.targetTouches)
event = e.targetTouches[0];
else
event = e;
context.beginPath();
context.moveTo(event.pageX, event.pageY);
context.lineTo(event.pageX + 1, event.pageY + 1);
canvas.onmousemove = draw;
}
function disableDraw(e) {
e.preventDefault();
if (e.targetTouches)
event = e.targetTouches[0];
else
event = e;
context.lineTo(event.pageX, event.pageY);
context.stroke();
context.closePath();
canvas.onmousemove = null;
}
enableDraw() und disableDraw() starten bzw. beenden das zeichnen beim festhalten der maustaste bzw. beim loslassen.
draw() zeichnet dann die linie beim gedrückhalten der maustaste bzw. beim fahren mit dem finger über das canvas.
4. Probleme
Das Beispiel hat noch kleinere Macken wenn es um das zeichnen auf schwächeren Touch devices geht. wenn man dabei zu schnell mit dem finger über das canvas wischt werden nicht alle events verarbeitet, wodurch die Zeichnung dann kantig wird (vor allem wenn man kurven oder kreise zeichnet).
5. Demo
Hier geht’s zur Demo
Mit HTML5 hält das <canvas> Element einzug in die Webentwicklung. Dies dient dem dynamischen Zeichnen von Objekten wie Linien oder Rechtecken direkt im Browser per JavaScript. Um nun einen Bereich...
