【发布时间】：2013-10-31 20:54:17
【问题描述】：
大家好， 我已经为这项任务寻求了一些帮助，但我得到的帮助是徒劳的.. 希望这一次 some1 能帮助我:( ..
每次单击按钮时，我都必须在已标识的画布上进行绘制， 但是经过一些修改后，我在屏幕上得到了结果，但我失去了一些功能， 由于出现错误，解析整数不起作用：
Uncaught ReferenceError: pGame is not defined
虽然它已被识别并且它曾经在早期工作过。
另一个问题是每次单击开始时都会清除画布：
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;
}
}
我的完整代码供参考：
<!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是在哪里定义的？ -
在我的代码末尾的表单中：div ....
标签： javascript html canvas