Форум

Jimy · #1 (**permalink**) 13.11.2019, 05:59

var ctx=document.getElementById("canvas").getContext("2d");

ctx.rect(0,0,800,600);
ctx.stroke();
circle=function(x,y,radius){
    ctx.beginPath();
    ctx.arc(x,y,radius,0,Math.PI*2,false);
    ctx.fill();
};
var ball=function(){
    this.x=100;
    this.y=100;
    this.xSpeed=-2;
    this.ySpeed=5;
    this.draw=function(){
        circle(this.x,this.y,20);
    };
};

ball.draw();

Вот и не рисует шарик... А если вызвать circle(100,100,20) то все нормально. Подскажите, что не так? Спасибо.

Jimy · #2 (**permalink**) 13.11.2019, 07:19

Все понял. Тема закрыта

рони · #3 (**permalink**) 13.11.2019, 08:10

Jimy,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">

</head>

<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
var ctx=document.getElementById("canvas").getContext("2d");

ctx.rect(0,0,800,600);
ctx.stroke();
circle=function(x,y,radius){
    ctx.beginPath();
    ctx.arc(x,y,radius,0,Math.PI*2,false);
    ctx.fill();
};
var ball=function(){
    this.x=100;
    this.y=100;
    this.xSpeed=-2;
    this.ySpeed=5;
    this.draw=function(){
        circle(this.x,this.y,20);
    };
};
var b = new ball();
b.draw();
b.x = 200;
b.draw();
b.y = 200;
b.draw();
b.x = 100;
b.draw();
  </script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript