JavaScript+canvas实现框内跳动小球
更新时间：2022年04月12日 15:38:27 作者：麦兜:)
这篇文章主要为大家详细介绍了JavaScript+canvas实现框内跳动小球，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JavaScript+canvas实现框内跳动小球的具体代码，供大家参考，具体内容如下
效果如下:
思路:
1.制定画布,确定好坐标
2.绘制出圆形小球
3.给圆一个原始坐标,xy轴的速度
4.每20毫秒刷新一次,达到变化的目的
5.判断边缘
全部代码及释义如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin: 50px auto;">
当前浏览器不支持canvas,请更新浏览器或者升级浏览器后再试
</canvas>
<script>
// x: 小球原始x坐标,y: 小球原始y坐标, r: 小球半径, vx: x轴速度,vy: y轴的速度 (速度都以向量表示,所以可为负数)
var ball = { x: 512, y: 100, r: 20, vx: -8, vy: 8, color: '#005588' }
window.onload = function () {
var canvas = document.getElementById("canvas");
// 制定canvas画布的大小
canvas.width = 860;
canvas.height = 600;
// 判断浏览器是否支持canvas
if (canvas.getContext("2d")) {
// 下面所有调用的函数都是基于context这个上下文环境来进行的
var context = canvas.getContext("2d");
setInterval(() => {
render(context)
update()
}, 20);
} else {
alert("当前浏览器不支持canvas,请更新浏览器或者升级浏览器后再试");
}
};
//十六进制颜色随机
function color16() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
var color = '#' + r.toString(16) + g.toString(16) + b.toString(16);
return color;
}
// 小球的坐标的刷新
function update() {
ball.x += ball.vx // x轴坐标 vx是x轴的速度,匀速增加
ball.y += ball.vy // y轴坐标 由于g的原因,速度是匀变速
// 触底的条件
if (ball.y >= canvas.height - ball.r) {
ball.color = color16()
ball.y = canvas.height - ball.r // 触下底
ball.vy = -ball.vy
} else if (ball.x <= ball.r) {
ball.color = color16()
ball.x = ball.r // 触左
ball.vx = -ball.vx
} else if (ball.x >= canvas.width - ball.r) {
ball.color = color16()
ball.x = canvas.width - ball.r // 触右
ball.vx = - ball.vx
} else if (ball.y <= ball.r) {
ball.color = color16()
ball.y = ball.r // 触上
ball.vy = -ball.vy
}
}
// 绘制圆形小球
function render(cxt) {
// 利用clearRect,清空画布
cxt.clearRect(0, 0, cxt.canvas.width, cxt.canvas.height)
cxt.fillStyle = ball.color
cxt.beginPath()
//context.arc(圆心横坐标, 原型纵坐标, 半径的长度,绘制的起点, 绘制的终点)
cxt.arc(ball.x, ball.y, ball.r, 0, 2 * Math.PI)
cxt.closePath()
cxt.fill()
}
</script>
</body>
</html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
JS要实现下载功能，一般都是这么几个过程：生成下载的URL，动态创建一个A标签，并将其href指向生成的URL，然后触发A标签的单击事件，这样就会弹出下载对话框，从而实现了一个下载的功能2017-07-07
这篇文章主要介绍了JavaScript极简入门教程（二）：数组,本文主要讲解了数组的创建和length属性的介绍,其它方法属性都没有介绍,需要的朋友可以参考下2014-10-10
这篇文章主要为大家详细介绍了js实现瀑布流布局，无限加载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
这篇文章主要介绍了详解Webpack多环境代码打包的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
微信小程序开发越来越多样化,各种丰富的设计及体验,自定义tabBar也经常使用,下面这篇文章主要给大家介绍了关于微信小程序如何自定义tabBar的相关资料,需要的朋友可以参考下2021-08-08
JavaScript中forEach和map方法的使用与区别
众所周知map和forEach是数组的操作方法,下面这篇文章主要给大家介绍了关于JavaScript中forEach和map方法的使用与区别,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了JS实现alert中显示换行的方法,实例分析了两种实现alert换行的实现技巧,非常简单实用,需要的朋友可以参考下2015-12-12
Js动态添加复选框Checkbox的实例方法，需要的朋友可以参考一下2013-04-04
找过很多图片轮询效果，和我的要求总是有些出入，不能十全十美。不是功能不全，就是太多花哨。本想自己开发一个，鉴于琐事拖延，迟迟未能开始2011-11-11
three.js是一款webGL框架，由于其易用性被广泛应用。接下来通过本文给大家分享three.js加载obj模型的实例代码，需要的朋友参考下吧2017-11-11
最新评论