用帆布

画圆，当我尝试画这个我没有看到任何实心圆我们的轮廓..用帆布

var ball = (function() { 
      function ball(x, y) { 
       this.color = "white"; 
       this.x = x; 
       this.y = y; 
       this.radius = Math.round(Math.random() * ball.MAX_RADIUS); 
      } 
      ball.MAX_RADIUS = 5; 
      ball.prototype.draw = function (context) { 
       context.fillStyle = "#ffffff"; 
       context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false); 
      }; 
      ball.prototype.update = function() { 
      }; 
      return ball; 
     })();

来源

2013-03-23 FutuToad

你是接近！

你总是要做context.beginPath（）绘画和context.fill（前）实际做填充绘制。

顺便说一句，你的圆圈填充颜色是白色的，所以你将无法在纯白色背景下看到它。我改变了你的填充色为红色只是为了下面的测试...

这里是代码：

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var ball = (function() { 
       function ball(x, y) { 
        this.color = "white"; 
        this.x = x; 
        this.y = y; 
        this.radius = Math.round(Math.random() * ball.MAX_RADIUS); 
       } 
       ball.MAX_RADIUS = 5; 
       ball.prototype.draw = function (context) { 
        context.fillStyle = "red"; 
        context.beginPath(); 
        context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false); 
        context.fill(); 
       }; 
       ball.prototype.update = function() { 
       }; 
       return ball; 
      })(); 

    var myNewBall=new ball(100,100); 
    myNewBall.draw(ctx); 

}); // end $(function(){}); 
</script> 

</head> 

<body> 

    <canvas id="canvas" width=300 height=300></canvas> 

</body> 
</html>

来源

2013-03-23 14:15:49 markE

啊这么简单谢谢！ – FutuToad 2013-03-23 15:08:41

回答

相关问题