“从形式解析”和“在开始（）上清除画布” [英] "parseInt from form" and "clearing canvas on start()"
问题描述
问候大家，
我已经要求一些帮助这项任务，但我得到的帮助是无效的..
希望这一次some1将是帮助我:(
Greeting Everyone, I already asked for some help with this assignment but the help I got was rather fruitless.. hope this time some1 would be to assist me :( ..
每次我点击一个按钮，我都要在id'd画布上绘制
然而经过一些修改后，我在屏幕上得到结果，但是我失去了一些功能，
解析整数无法工作，因为我得到一个错误：
I have to draw on an id'd canvas everytime i click on a button, however after some modification I get the result on my screen but I lost some functionalties, parsing integer wont work since I get an error:
Uncaught ReferenceError: pGame is not defined
虽然它已被识别，并且在早期阶段使用。
Although it is identified and it used to work at an early stage.
另一个问题是每次我点击开始清除画布：
another issue is clearing the canvas everytime I click start:
function start()
{
//tried making a counter, if its the first time to click
//start then do nothing else restore
// context.restore();
if (shouldClear==0) {
setInterval(rotateShape, 30);
var degrees = 0.0;
shouldClear = 1;
}
else{
rotateShape();
shouldClear-1;
}
}
p>
For reference pursposes here is my full code:
<!DOCTYPE HTML>
<html>
<head><title>Rectangles</title></head>
<body>
<script>
var i = 0;
var rectArrayStartX,rectArrayStartY,rectArrayDimY, rectArrayDimX;
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 shouldClear = 0;
function start()
{
//tried making a counter, if its the first time to click
//start then do nothing else restore
// context.restore();
if (shouldClear==0) {
setInterval(rotateShape, 30);
var degrees = 0.0;
shouldClear = 1;
}
else{
rotateShape();
shouldClear-1;
}
}
function construct()
{
var count = 25;
var count = parseInt(pGame.box.value);
var allShapes = [];
for (i=0; i < count; ++i) {
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, 50, 50, rotation, "rgb(" + randomRed + ", " + randomGreen + ", " + randomBlue +")");
allShapes.push(rect);
}
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) {
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 640, 480);
for (i=0; i < allShapes.length; ++i) {
allShapes[i].draw(ctx);
}
}
}
}
</script>
<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="10" style="border-style:inset;
color:red; background-color: black" />
</center>
</form>
<canvas id="gameId" width="598" height="300"
STYLE = "border:1px solid; background-color: #fff68f; position: absolute;">
</canvas>
</div>
</body>
</html>
推荐答案
pGame 尚未创建，当您尝试访问它。
将脚本放在表单下，以便在脚本执行之前创建表单，或者在 DOMContentLoaded 事件触发器。
这篇关于“从形式解析”和“在开始（）上清除画布”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
