Skip to content

Instantly share code, notes, and snippets.

@kirel

kirel/canvas.html

Created April 29, 2009 13:14
Show Gist options
  • Save kirel/103760 to your computer and use it in GitHub Desktop.
Save kirel/103760 to your computer and use it in GitHub Desktop.
Download ZIP
canvas experiments
Raw
canvas.html
<!DOCTYPE html>
<html>
<head>
<script src="http://www.google.com/jsapi"></script>
</head>
<body>
<canvas id="tafel" width="400" height="400" style="border:solid 1px black;">
Hier ist eine Tafel zum drauf malen...
</canvas>
<div id="info"></div>
<script>
// Load jQuery
google.load("jquery", "1");
google.setOnLoadCallback(function() {
var c = $("#tafel").get(0);
var i = $("#info");
i.text("Initialisiere Canvas...");
var ctx = c.getContext('2d');
ctx.strokeStyle = "rgb(255, 0, 255)";
ctx.lineWidth = 5;
i.text("Konstruiere Programmlogik...");
var draw = false;
var start = function(evt) {
draw = true;
i.text("(!) Male...");
var x,y;
x = evt.pageX - $(this).offset().left;
y = evt.pageY - $(this).offset().top;
ctx.moveTo(x, y);
}
var middle = function(evt) {
if (draw) {
i.text("(!) Mitte.");
var x,y;
x = evt.pageX - $(this).offset().left;
y = evt.pageY - $(this).offset().top;
ctx.lineTo(x, y);
ctx.stroke();
}
}
var stop = function(evt) {
if (draw) {
i.text("(!) Stoppe.");
draw = false;
i.text("(!) Gestoppt.");
}
}
i.text("Registriere Handler...");
$(c).mousedown(start)
.mousemove(middle)
.mouseup(stop)
.mouseout(stop);
i.text("Bereit. Bitte malen!");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment