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 に答える