Spsoi

Posted on Feb 1, 2022 • Edited on Feb 4, 2022

Html5 Canvas

#canvas #javascript #html

index.html

<body>
    <canvas></canvas>
    <script src="canvas.js"></script>
</body>

canvas.js

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

canvas {
    border: 1px solid black;
    /* height: 100%;
    width: 100%; */
}

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

Line

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

// 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
Отрисуем три круга.
Умножим случайное число на ширину экрана

let x = Math.random() * window.innerWidth;

Умножим случайное число на высоту экрана

let y = Math.random()* window.innerHeight;

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
}

Animation Canvas

Берём уже написанный код.

    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 рекурсия

function animate () {
    requestAnimationFrame(animate); // рекурсия
}

Объединяем

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

Вызываем

animate();

Получаем

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

Чистим ранее нарисованные кадры.

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

Код.

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

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

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

Отскок от правого или левого края экрана.

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

Отскок от всех границ экрана

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

Случайное начало координат и скорость.

//////////////////////////////////////////////////
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

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

DEV Community

Html5 Canvas

Animation Canvas

Top comments (0)

Read next

The JavaScript History API

KaibanJS v0.11.0: Empowering Developers with Advanced RAG Tools

Text compression & Code splitting & Modern image formats - Performance optimization

AI-Powered Code Generation: Revolutionizing Development