往期文章
- canvas - 基础了解
- canvas进阶之图像处理基础知识
- ............
效果
<!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">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#canvas {
display: block;
width: 800px;
height: 500px;
margin: 10px auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="500"></canvas>
<script>
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60)
}
})();
let football = null;
const Ball = function (options) {
this.canvas = document.getElementById('canvas');
this.ctx = this.canvas.getContext('2d');
this.image = new Image();
this.width = options.width;
this.height = options.height;
this.x = options.left;
this.y = options.top;
this.vyAdjust = -13;
this.vxAdjust = 0.25;
this.g = 0.4;
this.vy = 0.8;
this.vx = 4;
this.image;
this.bounceFactor = options.factor;
this.end = false;
this.degree = 0;
};
Ball.prototype = {
init: function () {
var me = this;
this.image.src = './images/football.png';
this.image.onload = function () {
me.loop();
};
football = this;
return this;
},
draw: function () {
this.ctx.save();
this.rotate();
this.ctx.drawImage(this.image, 0, 0, 100, 100, this.x, this.y, this.width, this.height);
this.ctx.restore();
if (this.vx > 0) {
this.degree += this.vx;
}
},
clearCanvas: function () {
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
loop: function () {
football.update();
football.end || requestAnimFrame(football.loop);
},
update: function () {
football.clearCanvas();
football.move();
football.draw();
},
hit: function () {
this.vy = this.vyAdjust;
},
move: function () {
this.y += this.vy;
this.vy += this.g;
if (this.vx > 0) {
this.x += this.vx;
}
if ((this.y + this.height) > this.canvas.height) {
this.hit();
this.vyAdjust *= this.bounceFactor;
this.vx -= this.vxAdjust;
}
if (this.vx < -0.1) {
this.end = true;
}
},
rotate: function () {
this.ctx.translate(this.x + this.width / 2, this.y + this.height / 2);
this.ctx.rotate(Math.PI / 180 * this.degree);
this.ctx.translate(-this.x - this.width / 2, -this.y - this.height / 2);
}
};
new Ball({
width: 100,
height: 100,
left: 0,
top: 0,
factor: 0.65
}).init();
</script>
</body>
</html>
本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。
在本网站中，您可以学习到最新的前端开发技术，了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例，让您可以快速掌握前端开发的核心技术和流程。
本网站还提供一系列实用的工具和插件，帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化，可以帮助您节省时间和精力，提升开发效率。
除此之外，本网站还拥有一个活跃的社区，您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信，社区的力量可以帮助您更好地成长和进步。
在本网站中，您可以找到您需要的一切前端开发资源，让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭，一起探索前端开发的无限可能!
