Question

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

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

Answer 1

你很亲密！

您必须在绘制之前执行 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>

用画布绘制圆圈

1 个答案: