{"id":425,"date":"2011-06-21T14:39:22","date_gmt":"2011-06-21T12:39:22","guid":{"rendered":"http:\/\/www.capri-soft.de\/blog\/?p=425"},"modified":"2011-06-21T14:39:54","modified_gmt":"2011-06-21T12:39:54","slug":"html5-mit-canvas-malen","status":"publish","type":"post","link":"https:\/\/www.capri-soft.de\/blog\/?p=425","title":{"rendered":"HTML5: Mit Canvas malen"},"content":{"rendered":"

Aufgabenstellung<\/h1>\n

In einem HTML 5 Canvas soll \u00fcber JavaScript-Events die Mausposition ausgelesen, und an dieser gemalt werden.<\/p>\n

Ansatz<\/h1>\n

Verwendung der Events onmousedown, onmouseup, onmousemove des Canvas-Elements. Nutzung der clientX- und clientY-Eigenschaft<\/p>\n

Pr\u00e4missen \/ Vorraussetzungen<\/h1>\n

Es wird ein aktueller Browser verwendet, der das HTML 5 Canvas-Element unterst\u00fctzt. <\/p>\n

L\u00f6sung<\/h1>\n
<html>\r\n<head>\r\n<script>\r\n\tfunction draw() {\r\n\t\tvar canvas = document.getElementById("canvas");\r\n\t\tvar ctx = canvas.getContext("2d");\r\n\t\tctx.fillStyle = "black";\r\n\t\tctx.beginPath();\r\n\t\tvar x;\r\n\t\tvar y;\r\n\t\tcanvas.onmousedown = function(e) {\r\n\t\t\tx = e.clientX;\r\n\t\t\ty = e.clientY;\r\n\t\t\tctx.moveTo(x, y);\r\n\t\t}\r\n\t\tcanvas.onmouseup = function(e) {\r\n\t\t\tx = null;\r\n\t\t\ty = null;\r\n\t\t}\r\n\t\tcanvas.onmousemove = function(e) {\r\n\t\t\tif (x == null || y == null) {\r\n\t\t\t\treturn;\r\n\t\t\t}\r\n\t\t\tx = e.clientX;\r\n\t\t\ty = e.clientY;\r\n\t\t\tx -= canvas.offsetLeft;\r\n\t\t\ty -= canvas.offsetTop;\r\n\t\t\tctx.lineTo(x, y);\r\n\t\t\tctx.stroke();\r\n\t\t\tctx.moveTo(x, y);\r\n\t\t}\r\n\t};\r\n<\/script>\r\n<\/head>\r\n<body onload="draw();">\r\n\t<canvas id="canvas" width="300" height="300"\r\n\t\tstyle="border: 1px solid black;"><\/canvas>\r\n<\/body>\r\n<\/html><\/pre>\n