用中间的随机数创建一个球（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）

回答

相关问题