중간에 난수가있는 공을 만듭니다 (html canvas 및 javascript)

Question

저는 함수가 호출 될 때마다 중간에서 다른 난수를 생성하는 공을 만들려고합니다. 이 공의 개체를 만들기위한 코드이지만 Math.random 메서드를 넣을 수있는 방법 및 실제 중간에 번호를 그립니다. 어떤 생각있어? 예를 들어

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(); 

Answer 1

는 난수를 생성하고 볼 후 화면에 그립니다 :

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() 함수로 옮겨서 호출 할 수 있습니다.

Answer 2

: 당신의 draw 기능 내부

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

Answer 3

 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() 함수를 호출하십시오.