このファイル: /home/web6047/www/cgi-bin/prj/20180128-home_javascript/20191113-newapp.js/20191120-汎用要素リサイズ試作 - snapshot 20191211/simple.html
1
<html>
2
<head>
3
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
4
<script>console.clear();</script>
5
<script src="AdditionalResize.js"></script>
6
<script src="c.js"></script>
7
<script src="k.js"></script>
8
<script>
9
function onloadx() {
10
11
cc = document.getElementById( "test" ).getContext( "2d" );
12
cc.canvasWidth = cc.canvas.width;
13
cc.canvasHeight = cc.canvas.height;
14
x = 0;
15
y = 0;
16
if( 1 ) {
17
18
ar = new AdditionalResize( document.getElementById( "test2" ) );
19
ar.setPosition( "c", "m" );
20
21
22
ac = new AdditionalCanvas( cc );
23
ac.setCrispEdge( true );
24
25
26
ak = new AdditionalKey();
27
ak.setSoftwareKey( "softwareKey37", onkeydownx, onkeyupx, 37 );
28
ak.setSoftwareKey( "softwareKey38", onkeydownx, onkeyupx, 38 );
29
ak.setSoftwareKey( "softwareKey39", onkeydownx, onkeyupx, 39 );
30
ak.setSoftwareKey( "softwareKey40", onkeydownx, onkeyupx, 40 );
31
ak.tweakSoftwarePad( "softwarePad" );
32
}
33
34
keys = new Array();
35
onkeydown = onkeydownx;
36
onkeyup = onkeyupx;
37
38
draw( cc );
39
setInterval( frame, 70 );
40
}
41
function onkeydownx( e ) {
42
if( keys.indexOf( e.which ) == -1 ) keys.push( e.which );
43
}
44
function onkeyupx( e ) {
45
var idx = keys.indexOf( e.which );
46
if( idx != -1 ) keys.splice( idx, 1 );
47
}
48
function frame() {
49
for( var i = 0; i < keys.length; i++ ) {
50
var key = keys[ i ];
51
switch( key ) {
52
case 37: x -= 8; break;
53
case 38: y -= 8; break;
54
case 39: x += 8; break;
55
case 40: y += 8; break;
56
case 32: ar.onresizex();break;
57
}
58
}
59
draw( cc );
60
}
61
function draw( cc ) {
62
cc.clearRect( 0, 0, cc.canvasWidth, cc.canvasHeight );
63
cc.strokeStyle = "blue";
64
cc.strokeRect( 0, 0, cc.canvasWidth, cc.canvasHeight );
65
cc.beginPath();
66
cc.arc( cc.canvasWidth / 2 + x, cc.canvasHeight / 2 + y, 100, 0, 6.28, false );
67
cc.closePath();
68
cc.stroke();
69
cc.fillText( cc.canvasWidth + ", " + cc.canvasHeight, 50, 50 );
70
}
71
72
function test( kind ) {
73
switch( kind ) {
74
case 'crisp':
75
ac.setCrispEdge( !ac.crispEdge );
76
break;
77
}
78
}
79
</script>
80
<style>
81
html {
82
background-color : gray;
83
}
84
body {
85
margin : 0;
86
width : 100%;
87
height : 100%;
88
border : solid 2px red;
89
box-sizing : border-box;
90
background-color : white;
91
}
92
td {
93
background-color : lightblue;
94
width : 33.3%;
95
height : 50%;
96
text-align : center;
97
cursor : pointer;
98
}
99
td:hover, td:active, td:focus {
100
background-color : orange;
101
font-weight : bolder;
102
font-size : larger;
103
}
104
</style>
105
</head>
106
<body onload="onloadx()">
107
<div id="test2" style="
108
box-sizing : border-box;
109
border : solid 0px blue;
110
display : inline-block;
111
">
112
CSS の CrispEdge：
113
<a href="javascript:test( 'crisp' );">オン／オフ</a> <BR>
114
115
<canvas id="test" width="256" height="244" style="
116
width : 512px;
117
height : 488px;
118
image-rendering : pixelated;
119
box-sizing : border-box;
120
border : solid 0px black;
121
"></canvas><BR>
122
<table id="softwarePad" width="100%" height="100" cellspacing="0"
123
style="
124
display : table;
125
">
126
<tr>
127
<td></td>
128
<td id="softwareKey38">↑</td>
129
<td></td>
130
</tr>
131
<tr>
132
<td id="softwareKey37">←</td>
133
<td id="softwareKey40">↓</td>
134
<td id="softwareKey39">→</td>
135
</tr>
136
</table>
137
キーボードの↑↓←→キーで動きます。
138
</div>
139
</body>
140
</html>