Html5 Canvas
Tags: canvas, javascript, html
Published: 2022-02-01 14:05:15

**index.html**

```html
<body>
    <canvas></canvas>
    <script src="canvas.js"></script>
</body>
```
**canvas.js**

```javascript
var canvas = document.querySelector('canvas');

canvas.width = window.innerWidth; // установим ширину canvas равную ширине окна
canvas.height = window.innerHeight; // установим высоту canvas равную высоте окна

var c = canvas.getContext('2d');

c.fillStyle = 'rgba(255,0,0,0.5)'; // задать квадратам цвет и прозрачность
c.fillRect(100, 200, 100, 100); // Квадрат, left=x=100, top=y=200, width = 100, height = 100
c.fillStyle = 'rgba(0,0,255,0.5)'; // переопределим цвет для двух оставшихся
c.fillRect(200, 400, 100, 100); // Квадрат, left=x=100, top=y=200, width = 100, height = 100
c.fillRect(300, 500, 100, 100); // Квадрат, left=x=100, top=y=200, width = 100, height = 100
console.log(canvas);
```
style.css
```css
canvas {
    border: 1px solid black;
    /* height: 100%;
    width: 100%; */
}

body { // убираем отступы для канваса
    margin: 0;
}
```
Line

```javascript
c.beginPath(); // старт рисования
c.moveTo(50, 300); // x , y точка старта (невидимая)
c.lineTo(300, 100); // x , y отрисовать линию (невидимая)
c.lineTo(400, 300); // x , y отрисовать линию (невидимая)
c.strokeStyle = "#fa34a3"; // как css
c.stroke(); // сделать видимым moveTo, lineTo
```
Arc - Circle

```javascript
// arc
c.beginPath(); // старт рисования Если без него, будет соединение с последней точкий.
c.arc(
    300, // x
    300, // y
    30, // raduis
    0, //startAngle
    Math.PI * 2, //endAngle
    false
)
c.strokeStyle = 'blue'; // покрасим края
c.stroke(); // сделать видимым c.arc
```
// arc
Отрисуем три круга.
Умножим случайное число на ширину экрана
```javascript
let x = Math.random() * window.innerWidth;
```
Умножим случайное число на высоту экрана
```javascript
let y = Math.random()* window.innerHeight;
```

```javascript
for (let i = 0; i < 3; i++) {
	let x = Math.random() * window.innerWidth;
	let y = Math.random() * window.innerHeight;
	c.beginPath(); // старт рисования Если без него, будет соединение с последней точкой.
	c.arc(
		x, // x
		y, // y
		30, // raduis
		0, //startAngle
		Math.PI * 2, //endAngle
		false
	)
	c.strokeStyle = 'blue'; // покрасим края
	c.stroke(); // сделать видимым c.arc
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m45geu4p0j9954opxt0t.png)

## Animation Canvas
Берём уже написанный код.
```javascript
    c.beginPath(); // старт рисования Если без него, будет соединение с последней точки.
    c.arc(
       200, // x
        200, // y
        30, // raduis
        0, //startAngle
        Math.PI * 2, //endAngle
        false
    )
    c.strokeStyle = 'blue'; // покрасим края
    c.stroke(); // сделать видимым c.arc
```
function рекурсия
```javascript
function animate () {
    requestAnimationFrame(animate); // рекурсия
}
```
Объединяем

```javascript
 let x = 200;
function animate () {
    requestAnimationFrame(animate); // рекурсия
    c.beginPath(); // старт рисования Если без него, будет соединение с последней точки.
    c.arc(
        x, // x
        200, // y
        30, // raduis
        0, //startAngle
        Math.PI * 2, //endAngle
        false
    )
    c.strokeStyle = 'blue'; // покрасим края
    c.stroke(); // сделать видимым c.arc
    x += 1;
}
```
Вызываем

```javascript
animate();
```

Получаем 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1f5f0h2qo4ha7ykaepwi.png)

Через секунду

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5csnezm70wvr15nyureg.png)

Чистим ранее нарисованные кадры.
```javascript
c.clearRect(0,0, innerWidth, innerHeight); // Стираем ранее нарисованный кадр
```
Код.
```javascript
let x = 200;
function animate () {
    requestAnimationFrame(animate); // рекурсия
///////////////////////////////////////////////
    c.clearRect(0,0, innerWidth, innerHeight); // Стираем ранее нарисованный кадр
///////////////////////////////////////////////
    c.beginPath(); // старт рисования Если без него, будет соединение с последней точки.
    c.arc(
        x, // x
        200, // y
        30, // raduis
        0, //startAngle
        Math.PI * 2, //endAngle
        false
    )
    c.strokeStyle = 'blue'; // покрасим края
    c.stroke(); // сделать видимым c.arc
    x += 1;
}
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sh0ssn3nytqhanodzphz.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1u3lypfigo4gkxj4h17p.png)

Отскок от края экрана

```javascript
let x = 200;
let dx = 10;
function animate () {
    requestAnimationFrame(animate); // рекурсия
    c.clearRect(0,0, innerWidth, innerHeight); // Стираем ранее нарисованный кадр
    c.beginPath(); // старт рисования Если без него, будет соединение с последней точки.
    c.arc(
        x, // x
        200, // y
        30, // raduis
        0, //startAngle
        Math.PI * 2, //endAngle
        false
    )
//////////////////////////////////////////////////////
    if (x > innerWidth) {
        dx = -dx;
    }
/////////////////////////////////////////////////////
    c.strokeStyle = 'blue'; // покрасим края
    c.stroke(); // сделать видимым c.arc
    x += dx;
}

animate();
```
Отскок от правого или левого края экрана.

```javascript
let x = 200; // 
let y = 200;
let dx = 10; // скорость x
let radius = 30;
function animate () {
    requestAnimationFrame(animate); // рекурсия
    c.clearRect(0,0, innerWidth, innerHeight); // Стираем ранее нарисованный кадр
    c.beginPath(); // старт рисования Если без него, будет соединение с последней точки.
    c.arc(
        x, // x
        y, // y
        radius,
        0, //startAngle
        Math.PI * 2, //endAngle
        false
    )
/////////////////////////////////////////////////////////////
    if (x + radius > innerWidth || x - radius < 0) {
        dx = -dx;
    }
/////////////////////////////////////////////////////////////
    c.strokeStyle = 'blue'; // покрасим края
    c.stroke(); // сделать видимым c.arc
    x += dx;
}

animate();
```
Отскок от всех границ экрана
```javascript
let x = 200; // координаты x
let y = 200; // координаты y
let dx = 10; // скорость x
let dy = 10; // скорость y
let radius = 30;
function animate () {
    requestAnimationFrame(animate); // рекурсия
    c.clearRect(0,0, innerWidth, innerHeight); // Стираем ранее нарисованный кадр
    c.beginPath(); // старт рисования Если без него, будет соединение с последней точки.
    c.arc(x, y, radius,0, Math.PI * 2, false);
    if (x + radius > innerWidth || x - radius < 0) {
        dx = -dx;
    }

//////////////////////////////////////////////////////////
    if (y + radius > innerHeight || y - radius < 0) {
        dy = -dy;
    }
//////////////////////////////////////////////////////////
    c.strokeStyle = 'blue'; // покрасим края
    c.stroke(); // сделать видимым c.arc
    x += dx;
    y += dy;
}

animate();
```
Случайное начало координат и скорость.
```javascript
//////////////////////////////////////////////////
let x = Math.random() * innerWidth; // координаты x
let y =  Math.random() * innerHeight; // координаты y
let dx = (Math.random() - 0.5) * 10; // скорость x
let dy = (Math.random() - 0.5) * 10; // скорость y
/////////////////////////////////////////////////
let radius = 30;
function animate () {
    requestAnimationFrame(animate); // рекурсия
    c.clearRect(0,0, innerWidth, innerHeight); // Стираем ранее нарисованный кадр
    c.beginPath(); // старт рисования Если без него, будет соединение с последней точки.
    c.arc(x, y, radius,0, Math.PI * 2, false);

    if (x + radius > innerWidth || x - radius < 0) {
        dx = -dx;
    }
    if (y + radius > innerHeight || y - radius < 0) {
        dy = -dy;
    }
    c.strokeStyle = 'blue'; // покрасим края
    c.stroke(); // сделать видимым c.arc
    x += dx;
    y += dy;
}

animate();
```
Теперь refactoring code

```javascript
var canvas = document.querySelector('canvas');

canvas.width = window.innerWidth; // установим ширину canvas равную ширине окна
canvas.height = window.innerHeight; // установим высоту canvas равную высоте окна

var c = canvas.getContext('2d');

function Circle (x , y, dx, dy, radius) {
    this.x = x;
    this.y = y;
    this.dx = dx;
    this.dy = dy;
    this.radius = radius;

    this.draw = function () {
        c.beginPath(); // старт рисования Если без него, будет соединение с последней точки.
        c.arc(this.x, this.y, this.radius,0, Math.PI * 2, false);
        c.strokeStyle = 'blue'; // покрасим края
        c.stroke(); // сделать видимым c.arc
    }
    this.update = function () {
        if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
            this.dx = -this.dx;
        }
        if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
            this.dy = -this.dy;
        }

        this.x += this.dx;
        this.y += this.dy;

        this.draw();
    }
}

let circleArray = [];

for (let i = 0; i < 2000; i++) {
    let radius = 30;
    let x = Math.random() * (innerWidth - radius * 2)+ radius; // координаты x
    let y =  Math.random() * (innerHeight - radius * 2) + radius; // координаты y
    let dx = (Math.random() - 0.5) * 3; // скорость x
    let dy = (Math.random() - 0.5) * 3; // скорость y
    circleArray.push( new Circle(x, y, dx, dy, radius ));
}


function animate () {
    requestAnimationFrame(animate); // рекурсия
    c.clearRect(0,0, innerWidth, innerHeight); // Стираем ранее нарисованный кадр

    for (let k = 0; k < circleArray.length; k++) {
        circleArray[k].update();
    }
}

animate();
```