DEV Community 👩‍💻👨‍💻

Spsoi
Spsoi

Posted on

HTML5 Javascript Canvas Gravity

Читать снизу вверх

jsfiddle.net

Включаем гравитацию.

function Ball (x, y, dy, radius, color) { // шарик
    // 2
    this.x =x;
    this.y = y;
    this.dy = dy; // скорость падения вниз
    this.radius = radius;
    this.color = color;

    this.update = function() {
        if (this.y + this.radius > canvas.height) { // отскок
            this.dy = -this.dy * friction;
        }else {
            this.dy += gravity; // гравитация от 0.0 до 1.0
        }
        this.y += this.dy;
        this.draw();
    }

    this.draw = function () {
        c.beginPath();
            c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
            c.fillStyle = this.color;
            c.fill();
        c.closePath();
    }
}
Enter fullscreen mode Exit fullscreen mode

jsfiddle.net
Отскок от края

function Ball (x, y, dy, radius, color) { // шарик
    // 2
    this.x =x;
    this.y = y;
    this.dy = dy; // скорость падения вниз
    this.radius = radius;
    this.color = color;

    this.update = function() {
        if (this.y + this.radius > canvas.height) { // отскок
            this.dy = -this.dy;
        }
        this.y += this.dy;
        this.draw();
    }

    this.draw = function () {
        c.beginPath();
            c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
            c.fillStyle = this.color;
            c.fill();
        c.closePath();
    }
}
Enter fullscreen mode Exit fullscreen mode

jsfiddle.net
Заставим его падать

function Ball (x, y, dy, radius, color) { // шарик
    // 2
    this.x =x;
    this.y = y;
    this.dy = dy; // скорость падения вниз
    this.radius = radius;
    this.color = color;

    this.update = function() {
        this.y += this.dy;
        this.draw();
    }

    this.draw = function () {
        c.beginPath();
            c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
            c.fillStyle = this.color;
            c.fill();
        c.closePath();
    }
}

let ball;
function init() { // точка входа
    // 1
    ball = new Ball (canvas.width / 2, canvas.height / 2, 10, 30, 'red');
}
Enter fullscreen mode Exit fullscreen mode

jsfiddle.net

Нарисуем а центре красный круг

canvas = document.querySelector('#canvas');
let c = canvas.getContext('2d');

let mouse = {
    x: innerWidth / 2,
    y: innerHeight / 2
}

document.addEventListener("mousemove", function(event){
    mouse.x = event.clientX;
    mouse.y = event.clientY;
});

function Ball (x, y, radius, color) { // шарик
    // 2
    this.x =x;
    this.y = y;
    this.radius = radius;
    this.color = color;

    this.update = function() {
        this.draw();
    }

    this.draw = function () { // рисуй
        c.beginPath();
            c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
            c.fillStyle = this.color;
            c.fill();
        c.closePath();
    }
}

let ball;
function init() { // точка входа
    // 1
    ball = new Ball (canvas.width / 2, canvas.height / 2, 30, 'red');
}

function animate() {
    console.log(mouse.x);
    console.log(mouse.y);
    c.clearRect(0,0, canvas.width, canvas.height);
    ball.update(); 
    requestAnimationFrame(animate);
}

init();
animate();
Enter fullscreen mode Exit fullscreen mode

jsfiddle.net
Цепляем текст к курсору

canvas = document.querySelector('#canvas');
let c = canvas.getContext('2d');

let mouse = {
    x: innerWidth / 2,
    y: innerHeight / 2
}

document.addEventListener("mousemove", function(event){
    mouse.x = event.clientX;
    mouse.y = event.clientY;
});
function animate() {
    console.log(mouse.x);
    console.log(mouse.y);
    c.clearRect(0,0, canvas.width, canvas.height);
    c.fillText("HTML CANVAS BOILERPLATE", mouse.x, mouse.y)
    requestAnimationFrame(animate);
}

animate();
Enter fullscreen mode Exit fullscreen mode

style.css

canvas {
    border: 1px solid #000;
}
Enter fullscreen mode Exit fullscreen mode

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>
    <script  src="canvas.js" ></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Latest comments (0)

Create an Organization Does your company have something to share with DEV?

Create an Organization and start sharing content with the community on DEV.