Читать снизу вверх
Включаем гравитацию.
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();
}
}
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();
}
}
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');
}
Нарисуем а центре красный круг
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();
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();
style.css
canvas {
border: 1px solid #000;
}
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>
Top comments (0)