-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathfullscreen.html
76 lines (70 loc) · 2.33 KB
/
fullscreen.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
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/base.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script>
// 読み込みが終わってから初期化
window.addEventListener("load", init);
function init() {
// ステージを作成
var stage = new createjs.Stage("myCanvas");
// タッチ操作をサポートしているブラウザーならば
if (createjs.Touch.isSupported() == true) {
// タッチ操作を有効にします。
createjs.Touch.enable(stage)
}
//-------------------------------
// リサイズ処理
//-------------------------------
// リサイズイベントを検知してリサイズ処理を実行
window.addEventListener("resize", handleResize);
handleResize(); // 起動時にもリサイズしておく
// リサイズ処理
function handleResize(event) {
// 画面幅・高さを取得
var w = window.innerWidth;
var h = window.innerHeight;
// Canvas要素の大きさを画面幅・高さに合わせる
stage.canvas.width = w;
stage.canvas.height = h;
// 画面更新する
stage.update();
}
//-------------------------------
// コンテンツの処理 (例)
//-------------------------------
// オブジェクトの作成
var shape = new createjs.Shape();
shape.graphics.beginFill("DarkRed").drawCircle(0, 0, 80);
stage.addChild(shape);
// 時間経過処理
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event) {
// 高速に移動する
shape.x += 30;
shape.y += 5;
// 画面端を超えたら反対側に移動する
if (shape.x > window.innerWidth) shape.x = 0;
if (shape.y > window.innerHeight) shape.y = 0;
// 画面更新
stage.update();
}
}
</script>
<style>
canvas#myCanvas {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="960" height="540"></canvas>
</body>
</html>