現在、フォームボックスの値に入力されたボックスの数でボックスをランダムに生成し、それらを回転させる JavaScript を作成中です。
<input>
JavaScript が読み込まれると、start() を押したときに生成されるボックスが、タグに設定されたデフォルト値になります。スクリプトの値を変更して、新しい数のボックスが表示されるように更新すると、ブラウザで値を変更して開始をクリックすると、キャンバスが更新されるだけで、すべてがその場所にとどまります。つまり、同じです。ボックスの数を減らしたり増やしたりしても、同じ場所にボックスが表示されます。
<!DOCTYPE HTML>
<html>
<head><title>Rectangles</title></head>
<body>
<div id="rectangles" STYLE = "background-color: #fff68f; width: 600px; height: 420px;
border-style: outset;position: absolute;">
<form name="pGame">
<center>
<b>Canvas Application</b><br>
<input type= "button" value= "Start" onclick= "start()" />
<input id="box" type="text" size="2" value="20" style="border-style:inset;
color:red; background-color: black" />
</center>
</form>
<script>
var shouldClear = 0;
これは、すべてのリセットが必要であると私が信じている場所です。
function start()
{
//tried making a counter, if its the first time to click save() context
// else restore
// context.restore(); but it didnt work, I think its because canvas and context
//arent declared here, but if I declare them in this scope or as global variable i get an error saying:Cannot call method 'getContext' of null
if (shouldClear<=0) {
setInterval(rotateShape, 250);
var degrees = 0.0;
shouldClear += 1;
}
if (shouldClear==1){
var canvas = document.getElementById('gameId');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 640, 480);
for (i=0; i < allShapes.length; ++i) {
allShapes[i].draw(ctx);
}
if (shouldClear==1) {
ctx.clearRect(0, 0, 640, 480);
construct();
//shouldClear= shouldClear - 10;
}
}
}
}
var chooseColor =0;
function construct()
{
var RotatingRectangle = function(x, y, width, height, rot, r,g,b){
var rotation = rot;
var rotationState = 0;
this.draw = function(ctx){
rotationState += rotation;
ctx.save();
ctx.translate(x+(width/2), y+(height/2));
ctx.rotate(rotationState);
var randomRed = Math.floor( Math.random() * 256 );
var randomGreen = Math.floor( Math.random() * 256 );
var randomBlue = Math.floor( Math.random() * 256 );
ctx.fillStyle = "rgb(" + randomRed + ", " + randomGreen + ", " + randomBlue +")";
ctx.fillRect(0-(width/2), 0-(height/2), width, height);
ctx.restore();
}
}
var count = parseInt(pGame.box.value);
var allShapes = [];
for (i=0; i < count; ++i) {
if (chooseColor == 0) {
var rotation = Math.random()*.10
var x = Math.floor(Math.random() * 640);
var y = Math.floor(Math.random() * 480);
var randomRed = Math.floor( Math.random() * 256 );
var randomGreen = Math.floor( Math.random() * 256 );
var randomBlue = Math.floor( Math.random() * 256 );
var rect = new RotatingRectangle(x, y, 15 + (Math.random() * 50), 15 + (Math.random() * 30), rotation, "rgb(" + randomRed + ", " + randomGreen + ", " + randomBlue +")");
allShapes.push(rect);
}
}
chooseColor = 1;
return allShapes;
}
var allShapes = construct();
function rotateShape()
{
var canvas = document.getElementById('gameId');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 640, 480);
for (i=0; i < allShapes.length; ++i) {
allShapes[i].draw(ctx);
}
if (shouldClear==1) {
ctx.clearRect(0, 0, 640, 480);
for (i=0; i < allShapes.length; ++i) {
allShapes[i].draw(ctx);
}
}
}
}
</script>
<canvas id="gameId" width="598" height="300"
STYLE = "border:1px solid; background-color: #fff68f; position: absolute;">
</canvas>
<div style="font-size:12; position: relative; text-align: center; top: 320px;">
Copyright © 2005 <span style="font-family: cursive;">do it@knowHow</span></div>
</div>
</body>
</html>