canvas小球抛物线运动
分类：实例代码
canvas小球抛物线运动属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，它利用canvas实现了小球的抛射效果。
简单的抛物线效果，代码实例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
html,body,canvas{
width:100vw;
height:100vh;
background:#000000;
overflow:hidden;
}
</style>
<script>
setTimeout(() => {
let canvas = document.querySelector('canvas');
let context = canvas.getContext('2d');
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
let pointer = {
x: 0,
y: canvas.height / 2
};
let render = () => {
context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = "green";
context.beginPath();
context.arc(pointer.x ,pointer.y, 100, 0, 2 * Math.PI, false);
context.fill();
};
let vx = 7;
let vy = -7;
let run;
( run= () => {
pointer.x += vx; // 位置恒定变化
vy += 0.1; // 速度恒定变化
pointer.y += vy;
if (pointer.x > canvas.width
|| pointer.y > canvas.height) {
pointer.x = 0;
pointer.y = canvas.height / 2;
vy = -7;
}
render();
requestAnimationFrame(run)
})();
}, 500);
</script>
</head>
<body>
<canvas></canvas>
</body>
</html>
canvas小球抛物线运动，这样的场景在实际项目中还是用的比较多的，关于canvas小球抛物线运动就介绍到这了。