-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
177 lines (145 loc) · 6.02 KB
/
index.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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html>
<head>
<title>Canvas Learning 1</title>
<style type="text/css">
/*
For the purposes of making a canvas that responds to mouse clicks, using CSS styling on the
canvas tag to make it 100% size isn't desirable because it stretches. Responding to the
full screen events with JavaScript seems to work better.
:-webkit-full-screen {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
*/
</style>
</head>
<script type="text/javascript">
window.onload = load;
var animationTimer = null;
var animationTimeStep = 1/30.0;
var xVelocity = 0.0;
var yVelocity = 0.0;
var canvas = null;
var ctx = null;
var isFullScreen = false;
/* This function handles when we switch between full screen and windowed mode. The canvas
* needs to have its size adjusted depending on where it's at.
*/
function handleFullScreen() {
if (!isFullScreen) {
isFullScreen = true;
origCanvasWidth = canvas.width;
origCanvasHeight = canvas.height;
canvas.width = screen.width;
canvas.height = screen.height;
} else {
isFullScreen = false;
canvas.width = origCanvasWidth;
canvas.height = origCanvasHeight;
}
drawScreen();
}
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.requestFullScreen) {
element.requestFullScreen();
} else if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
// Since the size of the canvas changed, redraw it.
drawScreen();
}
function drawScreen() {
ctx = canvas.getContext("2d");
// Note: Firefox seems to default to setting the background to black after going fullscreen, and
// if you want a clean screen drawn, you'll need to fill the background at least
ctx.fillStyle = "rgb(255, 255, 255)"
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.scale(canvas.width/12, canvas.height/2)
ctx.translate(0,1);
ctx.lineWidth = 2/canvas.height;
ctx.beginPath();
// Draws a sine wave
ctx.beginPath();
ctx.moveTo(0,0);
for(var i = 0; i < 4 * Math.PI; i += 0.1) {
ctx.lineTo(i,Math.sin(i));
}
ctx.stroke();
ctx.restore();
}
function load() {
canvas = document.getElementById("my_canvas");
fullScreenButton = document.getElementById("full_screen_button")
fullScreenButton.onclick = fullScreenButtonClick;
canvas.onmousedown = canvasMouseDown;
canvas.onmouseup = canvasMouseUp;
canvas.onmousemove = canvasMouseMove;
document.onfullscreenchange = handleFullScreen;
document.onmozfullscreenchange = handleFullScreen;
document.onwebkitfullscreenchange = handleFullScreen;
drawScreen();
}
function getCanvasPosition(event) {
var rect = canvas.getBoundingClientRect();
var x = new Number();
var y = new Number();
if (event.x != undefined && event.y != undefined)
{
x = event.x;
y = event.y;
}
else // Firefox method to get the position
{
x = event.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
console.log("event.clientX: " + event.clientX);
console.log("event.clientY: " + event.clientY);
}
x -= rect.left;
y -= rect.top;
return { x : x, y : y };
}
function canvasMouseDown(event) {
position = getCanvasPosition(event);
ctx.save();
ctx.fillStyle = "rgb(200, 0, 0)"
ctx.fillRect(position.x, position.y, 55, 50);
ctx.restore();
console.log("Canvas mouse down at: " + position.x + ", " + position.y);
}
function canvasMouseUp() {
ctx.save();
ctx.fillStyle = "rgb(0, 200, 0)"
ctx.fillRect(0, 0, 55, 50);
ctx.restore();
}
function canvasMouseMove() {
}
function fullScreenButtonClick() {
if (!isFullScreen)
goFullscreen("my_canvas");
}
</script>
<body>
<canvas id="my_canvas" width="300" height="300"></canvas>
<button id="full_screen_button">Go Fullscreen!</button>
</body>
</html>