用中間的隨機數創建一個球（html canvas和javascript）

我試圖創建一個球，每次調用該函數時都會在中間生成一個不同的隨機數。這是我創建一個球對象的代碼，但我不知道在哪裏放置Math.random方法以及如何在中間實際繪製數字。你有什麼想法嗎？下面是我的JavaScript外部文件的代碼：用中間的隨機數創建一個球（html canvas和javascript）

var c = document.getElementById("canvas"); 
var ctx = c.getContext("2d"); 
var ball = { 
     radius:50, 
     x:200, 
     y:150, 
     color:"#00F", 
     draw:function() { 
     var arcStartAngle=0; 
     var arcEndAngle=2*Math.PI; 

     ctx.fillStyle=this.color 
     ctx.beginPath(); 
     ctx.arc(this.x,this.y,this.radius,arcStartAngle,arcEndAngle); 
     ctx.fill(); 
     } 
} 
ball.draw();

來源

2014-10-31 Nodas Xiros

你想做什麼？可能是你不需要畫布。 – Cheery 2014-10-31 21:27:50

裏面你draw函數產生一個隨機數，球后繪製在屏幕上：

draw:function() { 
    ... 
    // Ball drawing stuff 
    ... 
    // Draw number in the middle 
    ctx.fillStyle= "#FFF"; 
    var randNum = Math.floor(Math.random()*10); 
    ctx.fillText(randNum,this.x,this.y); 
    }

Here is an example

這就是如果你想要drawi一個數字是分開的球。否則，您可以將代碼移動到某種drawRandomNumber()函數並調用它。

來源

2014-10-31 21:25:10

非常感謝你的幫助！ – 2014-10-31 21:35:38

例如：

draw:function(){ 
     var arcStartAngle=0; 
     var number = Math.round(Math.random() * 10) 
     ...

來源

2014-10-31 21:21:54 Swonkie

我已經試過了，它不工作。我認爲應該有對象中的另一個屬性，它包含一個隨機整數。謝謝你的回答，雖然 – 2014-10-31 21:28:54

 createRandomNo: function() { 
      var number = Math.round(Math.random() * 10); 
      ctx.font = "bold 16px Arial"; 
      ctx.fillStyle = "#000"; 
      ctx.fillText(number, this.x, this.y); 
     },

並在繪製球后調用createRandomNo（）函數。

來源

2014-10-31 21:26:38

用中間的隨機數創建一個球（html canvas和javascript）

回答

相關問題