@alekcena
Нелинейный наставник

В чём моя ошибка в работе с canvas?

Не могу понять почему не отображаются элементы в канвасе.
Шарики на полотне.
Ошибок никаких не выдаёт.
class test{
	constructor(){
		this.canvas = document.getElementById('canvas');
 		this.ctx = this.canvas.getContext('2d');
	}
}

test.prototype._rand = function(min, max){
  return Math.random() * (max - min) + min;
};

test.prototype.start = function() {
		this.render();
		this.createCircle();
};

test.prototype.render = function() {
	var wHeight = screen.height,
      	wWidth = screen.width;

    this.canvas.width = wWidth;
    this.canvas.height = wHeight;

    document.addEventListener('resize',()=>{this.render});
};

test.prototype.createCircle = function() {
	let particle = [];
	for(let i = 0; i<30; i++){
		var self = this;
		particle[i] = {
      		radius    : 25,
      		xPos      : self._rand(0, canvas.width),
      		yPos      : self._rand(0, canvas.height),
      		xVelocity : .2,
      		yVelocity : .2,
      		color     : 'rgba(' + '255, 255, 255' + ',' + 0.4 + ')'
    	}
    self.draw(particle,i);
}
};

test.prototype.draw = function(particle,i) {
	self = this,
	ctx  = self.ctx;

	ctx.fillStyle = particle[i].color;
	ctx.beginPath();
  	ctx.arc(particle[i].xPos, particle[i].yPos, particle[i].radius, 0, 2 * Math.PI, false);
  	ctx.fill();
};

let s1 = new test;
s1.start();
  • Вопрос задан
  • 251 просмотр
Решения вопроса 1
Seasle
@Seasle Куратор тега JavaScript
color : 'rgba(' + '255, 255, 255' + ',' + 0.4 + ')'

Как бы Вы рисуете полупрозрачные белые точки на белом фоне. Либо в CSS покрасьте canvas в другой цвет, либо в самом JS.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы