添加矩形和旋轉它們

我試着寫一個程序來生成一個標記，內隨機矩形，然後它的起源內旋轉的長方形，如果我打了啓動按鈕再次畫布應該清除掉繪製一套新的矩形和旋轉它們等等。添加矩形和旋轉它們

粘貼我的整個節目看起來可怕，所以生病後我認爲是很重要的：

創建我的陣列和初始化一些值：

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

添加矩形和旋轉它們

回答

相關問題