forked from lemontizz/convas
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path3-spri-t.html
106 lines (95 loc) · 2.38 KB
/
3-spri-t.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sprit</title>
<style>
body {
background: #ddd;
}
#canvas {
position: absolute;
left: 0;
top: 20px;
margin: 20px;
background: #fff;
border: thin inset rgba(100,150,230,0.5);
}
#readout {
margin-top: 10px;
margin-left: 15px;
color: blue;
}
</style>
</head>
<body>
<div id="readout"></div>
<canvas id="canvas" width="500" height="200">canvas not supported</canvas>
<script>
var canvas = document.getElementById('canvas'),
readout = document.getElementById('readout'),
context = canvas.getContext('2d'),
spritesheet = new Image();
function windowToCanvas(canvas, canvasbox, x, y) {
return {
x: (x - canvasbox.left) * (canvas.width / canvasbox.width),
clientX: x,
y: (y - canvasbox.top) * (canvas.height / canvasbox.height),
clientY: y
};
}
function drawBackground() {
var VERTICAL_LINE_SPACING = 12,
i = context.canvas.height;
context.clearRect(0, 0, canvas.width, canvas.height);
context.strokeStyle = 'lightgray';
context.lineWidth = 0.5;
while(i > VERTICAL_LINE_SPACING) {
console.log('i', i);
context.beginPath();
context.moveTo(0, i);
context.lineTo(context.canvas.width, i);
context.stroke();
i -= VERTICAL_LINE_SPACING;
}
}
function drawSpritesheet() {
context.drawImage(spritesheet, 0, 0);
}
function drawGuidelines(x, y) {
context.strokeStyle = 'rgba(0,0,230,0.8)';
context.lineWidth = 0.5;
drawVerticalLine(x);
drawHorizontalLine(y);
}
function updateReadout(x, y) {
readout.innerText = '(' + x.toFixed(0) + ',' + y.toFixed(0) + ')';
}
function drawHorizontalLine(y) {
context.beginPath();
context.moveTo(0, y + 0.5);
context.lineTo(context.canvas.width, y + 0.5);
context.stroke();
}
function drawVerticalLine(x) {
context.beginPath();
context.moveTo(x + 0.5, 0);
context.lineTo(x + 0.5, context.canvas.height);
context.stroke();
}
canvas.onmousemove = function(e) {
var canvasbox = canvas.getBoundingClientRect(),
loc = windowToCanvas(canvas, canvasbox, e.clientX, e.clientY);
drawBackground();
drawSpritesheet();
drawGuidelines(loc.x, loc.y);
updateReadout(loc.x, loc.y);
}
spritesheet.src = 'running-sprite-sheet.jpg';
spritesheet.onload = function(e) {
drawSpritesheet();
}
drawBackground();
</script>
</body>
</html>