-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo1_touch.html
56 lines (49 loc) · 1.43 KB
/
demo1_touch.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
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">
<title>egcanvas.js demo</title>
</head>
<body>
<script type="module">
import { createEgCanvas } from "https://js.sabae.cc/egcanvas.js";
const c = createEgCanvas();
// マウスやタッチされた場所
let mx = 0;
let my = 0;
c.draw = (g, cw, ch) => { // cw ch は画面の幅高さ、gを使って描画
// Canvas API https://developer.mozilla.org/ja/docs/Web/API/Canvas_API
// + extendGraphics https://js.sabae.cc/extendGraphics.js
// 全部真っ白にクリア
g.setColor(255, 255, 255);
g.fillRect(0, 0, cw, ch);
// 20コ、カラフルな円塗りつぶし
for (let i = 0; i < 20; i++) {
const x = Math.random() * cw;
const y = Math.random() * ch;
const r = Math.random() * (cw / 10);
const hue = Math.random() * 360;
g.setColorHSL(hue, 1, .9);
g.fillCircle(x, y, r);
}
// 画面中央からマウスやタッチの場所に向かって矢印
const cx = cw / 2;
const cy = ch / 2;
const dx = mx - cx;
const dy = my - cy;
const th = Math.atan2(dy, dx) / Math.PI * 180;
g.setColorHSL(th, 1, 0.5);
g.fillArrow(cx, cy, mx, my, 30, 100);
// 画面中央に文字
g.setFontSize(cw / 20);
g.setColorHSL(0, 0.5, 0);
g.fillTextCenter("egcanvas.js", cx, cy);
};
// マウスやタッチで再描画
c.onuimove = (x, y) => {
mx = x;
my = y;
c.redraw();
};
// ひとまず最初に描く
c.redraw();
</script>
</body>
</html>