JS canvas не рисует круги без ошибок

Question

"use strict"
  
function getRandomInt(max){
    return Math.floor(Math.random() * max);
}
  
class food{
    constructor(r, x, y){
        this.x = x
        this.y = y
        this.r = r
    }
}
  
let ctx = document.querySelector("#game").getContext('2d')
let i = 50;
  
while (i>0){
  const foodWh = new food(5, getRandomInt(800), getRandomInt(400));
  ctx.beginPath()
  ctx.arc(foodWh.x, foodWh.y, foodWh.r, 0, Math.Pi*2)
  ctx.fillStyle = 'red'
  ctx.fill()
  i--;
}

html

<canvas id="game" width="800" height="400"></canvas>

css

  canvas {
   margin: 20px 0;
   display: block;
   width: 800px;
   box-shadow: 0 0 2px 2px rgba(68, 68, 65, 0.205)
    }

Никаких ошибок не выдает, цикл работает нормально, обьект создается, круги создавал по учебнику. Должно нарисовать ~50 красных кругов на рандомных местах в канвасе..

Answer 1

Вы были немного невнимательны......Надо не Math.Pi, а Math.PI

function getRandomInt(max) {
  return Math.floor(Math.random() * max);
}

class food {
  constructor(r, x, y) {
    this.x = x
    this.y = y
    this.r = r
  }
}

let ctx = document.querySelector("#game").getContext('2d')
let i = 5;

while (i > 0) {

  const foodWh = new food(5, getRandomInt(800), getRandomInt(400));
  ctx.beginPath()
  ctx.arc(foodWh.x, foodWh.y, foodWh.r, 0, Math.PI * 2)
  ctx.fillStyle = 'red'
  ctx.fill()
  ctx.stroke();
  i--;
}

canvas {
  margin: 20px 0;
  display: block;
  width: 800px;
  box-shadow: 0 0 2px 2px rgba(68, 68, 65, 0.205)
}

<canvas id="game" width="800" height="400"></canvas>

БЛОГ НА HUSL

JS canvas не рисует круги без ошибок

Ответы (1 шт):