-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdrawpath.html
79 lines (71 loc) · 2.54 KB
/
drawpath.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!--
To change this template use Tools | Templates.
-->
<!DOCTYPE html>
<html>
<head>
<title>Mouse Events | Draw Mouse Path</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=1024" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<style type="text/css">
canvas.default { border: 1px solid black; }
textarea { border: 1px solid #888; width: 300px; height: 100px; }
</style>
<script>
window.onload = function () {
var started = false;
// Get the clear button
//
var clear = document.getElementById('clearButton');
// Get the canvas element
//
var canvas = document.getElementById('canvas');
// Get a reference to the drawing context
//
var ctx = canvas.getContext('2d');
function onMouseEvent (event) {
var x, y;
// Get the mouse position relative to the canvas element.
//
if (event.layerX || event.layerX == 0) { // Firefox
x = event.layerX;
y = event.layerY;
} else if (event.offsetX || event.offsetX == 0) { // Opera
x = event.offsetX;
y = event.offsetY;
}
// The event handler works like a drawing pencil which tracks the mouse
// movements. We start drawing a path made up of lines.
//
if (!started) {
ctx.beginPath();
ctx.moveTo(x, y);
started = true;
} else {
ctx.lineTo(x, y);
ctx.stroke();
}
}
function onClearEvent(event) {
started = false;
ctx.fillStyle = "white";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
canvas.addEventListener('mousemove', onMouseEvent, false);
clear.addEventListener('click', onClearEvent, false);
};
</script>
</head>
<body>
<p>
<a href="index.html">Back to index</a>
</p>
<canvas id="canvas" width="480" height="300" tabindex='0' class="default">
This browser or document mode doesn't support canvas
</canvas>
<div>
<input id="clearButton" type="button" value="Clear" />
</div>
</body>
</html>