添加矩形和旋转它们

我试着写一个程序来生成一个标记，内随机矩形，然后它的起源内旋转的长方形，如果我打了启动按钮再次画布应该清除掉绘制一套新的矩形和旋转它们等等。添加矩形和旋转它们

粘贴我的整个节目看起来可怕，所以生病后我认为是很重要的：

创建我的阵列和初始化一些值：

var rectArrayStartX,rectArrayStartY,rectArrayDimY, rectArrayDimX; 

function start() 
{ 
    if (i >= 1){ 
    canvas.restore() 
    i--; 
} 
construct(); 
window.setInterval("rotateShape()", 500); 

} 

function construct() 
{ 

if (i < 1) { 
    canvas.save(); 
    i++ 
} 
var canvas = document.getElementById("gameId"); 
var context = canvas.getContext("2d"); 
var k,m; 

var points = parseInt(pGame.box.value); 
rectArrayStartX[100]; 
rectArrayStartY[100]; 
rectArrayDimY[100]; 
rectArrayDimX[100];

代码的推移，但此位给了我这个错误：未捕获TypeError：无法读取未定义的属性'100'

即时尝试为每个点，原点x和y +宽度和高度创建一个数组。然后使用fillRect生病传递数组值绘制矩形我。

二位即时通讯具有使用下面的函数旋转它们，我的问题：

function rotateShape() 
{ 
    var randomAngle; 
    randomAngle = Math.random() * 5 ; 
     if (randomAngle>3.14) 
     { 
       randomAngle=3.14 
     } 
//context.translate(canvas.width/2, canvas.height/2); 
    context.rotate(randomAngle); 


}

即时调用它下面的功能，但它什么都不做，althought后，我需要找到每个矩形的起源和旋转它以正确的方式，但现在我只是想确保功能的工作原理：

function start() 
{ 
    if (i >= 1){ 
    canvas.restore() 
    i--; 
} 
construct(); 
    window.setInterval("rotateShape()", 500); 

}

如果修改我的整个代码会更容易，不要让我知道为它提供。感谢您的时间和遗憾的长期话题。

来源

2013-10-30 Amer Almutawa

阅读主题后的一些想法：我们无法完全解决您提供的问题。确保'i'是一个全局变量。尝试通过在声明变量时对其进行初始化来修复错误。尝试简化/用伪代码来编写程序，这将有很大帮助 –

下面是一些代码，让你开始...

这段代码：

画一个50x30的矩形，
即围绕旋转中心点的30度，
，是其中心点位于画布坐标[100,100]

该代码：

// save the untransformed context state 

context.save(); 

// move (translate) to the "rotation point" of the rect 
// this will be the centerpoint of the rect 

context.translate(100,100); 

// rotate by 30 degrees 
// rotation requires radians so a conversion is required 

context.rotate(30*Math.PI/180); 

// draw a 50 x 30 rectangle 
// since rects are positioned by their top-left 
// and since we're rotating from the rects centerpoint 
// we must draw the rect offset by -width/2 and -height/2 

var width=50; 
var height=30; 

context.fillRect(-width/2, -height/2, width, height); 

// restore the context to its untransformed state 

context.restore();

来源

2013-10-30 14:09:09 markE

添加矩形和旋转它们

回答

相关问题