Drawing circles with canvas

2019-08-30 23:24发布

站内问答 / 前沿技术
937 1 5

when I try draw this I do not see any solid circles our outlines.. 

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

1条回答
Rolldiameter
2楼-- · 2019-08-31 00:20

You were close!

You always have to do context.beginPath() before drawing and context.fill() to actually do the fill-draw.

BTW, your circle fill color is white, so you wouldn't be able to see it against a solid white background. I changed your fill color to red just for the test below...

Here is code:

<!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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)