0

当我尝试画这个时，我看不到我们的轮廓有任何实心圆圈.. 

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

1 回答 1

2

你很亲近！

您总是必须在绘制之前执行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-23T14:15:49.187 回答