用帆布

畫圓，當我嘗試畫這個我沒有看到任何實心圓我們的輪廓..用帆布

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

回答

相關問題