Javascript 点击一个按钮，重新开始我的画布
我目前正在编写JavaScript，它将随机生成框，框的数量输入到我的表单框值中，并使它们旋转等等 加载JavaScript时，当我点击start（）时生成的框是Javascript 点击一个按钮，重新开始我的画布,javascript,html,canvas,Javascript,Html,Canvas,我目前正在编写JavaScript，它将随机生成框，框的数量输入到我的表单框值中，并使它们旋转等等 加载JavaScript时，当我点击start（）时生成的框是标记中设置的默认值。如果我更改脚本中的值并刷新出现的新框数，否则如果我使用浏览器更改值并单击“启动gizillion time”，则只会刷新画布，但所有内容都会保持原样，换句话说，即使我减少或增加了框数，相同的框也会出现在相同的位置： <!DOCTYPE HTML> <html> <head><
<!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;
矩形
画布应用程序
var应清除=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>
函数开始（）
{
//如果是第一次单击save（）上下文，则尝试创建计数器
//否则恢复
//restore（）；但它不起作用，我认为这是因为画布和上下文
//在这里没有声明，但是如果我在这个范围内声明它们，或者将它们声明为全局变量，我会得到一个错误消息：cannotcallmethod'getContext'of null
if（shouldClear所以我发现重构代码比发现问题所在更快
正如您在这里看到的，它现在工作正常：
HTML:
<div id="rectangles" STYLE="background-color: #fff68f; width: 600px; height: 420px;
border-style: outset;position: absolute;">
<form name="pGame">
<center> <b>Canvas Application</b>
<canvas id="gameId" width="598" height="300" style="border:1px solid; background-color: #eee68e; ">Your Browser does not support Canvas.</canvas>
<br/>
<input type="button" value="Start" onclick="updateShapes()"></input>
<input id="box" type="text" size="2" value="20" style="border-style:inset;
color:red; background-color: black"></input>
</center>
</form>
</div>
画布应用程序
您的浏览器不支持画布。
Javascript:
（如果在JSFIDLE之外使用此代码，请确保等待加载DOM）
//-------------------------------
//画布和上下文
var canvas=document.getElementById（'gameId'）；
var ctx=canvas.getContext（'2d'）；
// -------------------------------
//处理用户输入
函数updateShapes（）{
allShapes=buildShapes（parseInt（pGame.box.value）、canvas.width、canvas.height）；
}
window.updateShapes=updateShapes；
// -------------------------------
//旋转矩形类
函数旋转矩形（x、y、宽度、高度、旋转、颜色）{
这个.x=x；
这个。y=y；
旋转=腐烂；
此.rotationState=0；
这个。宽度=宽度；
高度=高度；
这个颜色=颜色；
}
RotatingRectangle.prototype.rotate=函数（）{
this.rotationState+=this.rotation；
};
RotatingRectangle.prototype.draw=函数（ctx）{
ctx.save（）；
ctx.translate（this.x+（this.width/2）、this.y+（this.height/2））；
ctx.rotate（此.rotationState）；
ctx.fillStyle=this.color；
ctx.fillRect（-this.width/2，-this.height/2，this.width，this.height）；
ctx.restore（）；
};
// -------------------------------
//处理形状集合
//初始化
var-allShapes=null；
updateShapes（）；
//构建一组随机形状
函数buildShapes（计数、最大值、最大值）{
var tmpShapes=[]；
对于（i=0；imaxX）x-=diag；
如果（y-diag<0）y+=diag；
如果（y+diag>maxY）y-=diag；
var color=getRandomColor（）；
var rect=新的旋转矩形（x、y、宽度、高度、旋转、颜色）；
tmpShapes.push（矩形）；
}
返回TMP形状；
}
//旋转所有形状
函数rotateShapes（）{
对于（i=0；i
所以我发现重构代码要比找出问题所在更快
正如您在这里看到的，它现在工作正常：
HTML:
<div id="rectangles" STYLE="background-color: #fff68f; width: 600px; height: 420px;
border-style: outset;position: absolute;">
<form name="pGame">
<center> <b>Canvas Application</b>
<canvas id="gameId" width="598" height="300" style="border:1px solid; background-color: #eee68e; ">Your Browser does not support Canvas.</canvas>
<br/>
<input type="button" value="Start" onclick="updateShapes()"></input>
<input id="box" type="text" size="2" value="20" style="border-style:inset;
color:red; background-color: black"></input>
</center>
</form>
</div>
画布应用程序
您的浏览器不支持画布。
Javascript:
（如果在JSFIDLE之外使用此代码，请确保等待加载DOM）
//-------------------------------
//画布和上下文
var canvas=document.getElementById（'gameId'）；
var ctx=canvas.getContext（'2d'）；
// -------------------------------
//处理用户输入
函数updateShapes（）{
allShapes=buildShapes（parseInt（pGame.box.value）、canvas.width、canvas.height）；
}
window.updateShapes=updateShapes；
// -------------------------------
//旋转矩形类
函数旋转矩形（x、y、宽度、高度、旋转、颜色）{
这个.x=x；
这个。y=y；
旋转=腐烂；
此.rotationState=0；
这个。宽度=宽度；
高度=高度；
这个颜色=颜色；
}
RotatingRectangle.prototype.rotate=函数（）{
this.rotationState+=this.rotation；
};
RotatingRectangle.prototype.draw=函数（ctx）{
ctx.save（）；
ctx.translate（this.x+（this.width/2）、this.y+（this.height/2））；
ctx