JavaScript canvas实现跟随鼠标移动小球


Posted in Javascript onFebruary 09, 2021

本文实例为大家分享了js跟随鼠标移动小球的具体代码,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style>
 canvas{
 border: 1px solid #000;
 }
 </style>
 </head>
 <body>
 <canvas id="mycanvas" width="1500" height="800"></canvas>
 <script>
 // 创建画布
 var canvas = document.getElementById('mycanvas');
 var ctx = canvas.getContext('2d');
 // 球类
 function Ball(x, y) {
 this.x = x;
 this.y = y;
 // 初始半径
 this.r = parseInt(Math.random() * 50) + 10;
 this.step = parseInt(Math.random() * 5) + 0.1;
 // 设置随机颜色
 this.color = getRandom();
 // 设置随机方向
 this.dx = parseInt(Math.random() * 10) - 5;
 this.dy = parseInt(Math.random() * 10) - 5;
 // 将自身对象装入数组中
 ballArr.push(this);
 }
 // 在数组中删除对象
 Ball.prototype.remove = function() {
 for (var i = 0; i < ballArr.length; i++) {
 if (ballArr[i] == this) {
 ballArr.splice(i, 1);
 }
 }
 }
 // 更新数据
 Ball.prototype.update = function() {
 // 更新数据
 this.x += this.dx;
 this.y += this.dy;
 this.r -= this.step;
 // 清除数组中的小球
 if (this.r <= 0) {
 this.remove();
 }
 // 如果超出边界,小球继续运动
 if (this.x < 0) {
 this.x = 1500;
 this.color = getRandom();
 }
 else if (this.x > 1500) {
 this.x = 0;
 this.color = getRandom();
 }
 else if (this.y < 0) {
 this.y = 800;
 this.color = getRandom();
 }
 else if (this.y > 800) {
 this.y = 0;
 this.color = getRandom();
 }
 }
 // 渲染小球
 Ball.prototype.render = function() {
 ctx.beginPath();
 ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
 ctx.fillStyle = this.color;
 ctx.fill();
 }
 // canvas 画布DOM2事件
 canvas.addEventListener("mousemove", function(event) {
 new Ball(event.offsetX, event.offsetY);
 });
 var ballArr = [];
 // 定时器进行动画渲染和更新
 setInterval(function() {
 // 动画逻辑 
 // 清屏-更新-渲染
 ctx.clearRect(0, 0, canvas.width, canvas.height);
 // 小球的更新和渲染
 for (var i = 0; i < ballArr.length; i++) {
 ballArr[i].update();
 if (ballArr[i]) {
 ballArr[i].render();
 }
 }
 }, 30);
 // 随机颜色
 function getRandom() {
 var allType = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
 var allTypeArr = allType.split(",");
 var color = "#";
 // 拼接颜色字符串
 for (var i = 0; i < 6; i++) {
 var random = parseInt(Math.random() * allTypeArr.length);
 color += allTypeArr[random];
 }
 return color;
 }
 </script>
 </body>
</html>

效果

JavaScript canvas实现跟随鼠标移动小球

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用JavaScript脚本实现Web页面信息交互
Dec 21 Javascript
js控制iframe的高度/宽度让其自适应内容
Apr 09 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
详解vue-cli开发环境跨域问题解决方案
Jun 06 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
在vue中读取本地Json文件的方法
Sep 06 Javascript
Vue 实现前进刷新后退不刷新的效果
Jun 14 Javascript
vue实现二级导航栏效果
Oct 19 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
JS实现分页导航效果
Feb 19 Javascript
javascript实现简单留言板案例
Feb 09 #Javascript
javascript实现下拉菜单效果
Feb 09 #Javascript
用javascript实现倒计时效果
Feb 09 #Javascript
javascript实现倒计时关闭广告
Feb 09 #Javascript
javascript实现固定侧边栏
Feb 09 #Javascript
JavaScript实现前端倒计时效果
Feb 09 #Javascript
Vue+Bootstrap实现简易学生管理系统
Feb 09 #Vue.js
You might like
php addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
JS中简单的实现像C#中using功能(有源码下载)
2007/01/09 Javascript
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
jQuery怎么解析Json字符串(Json格式/Json对象)
2013/08/09 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
js 采用delete实现继承示例代码
2014/05/20 Javascript
jquery中JSON的解析方式
2015/03/16 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
Vue根据条件添加click事件的方式
2019/11/09 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
2020/06/05 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
Python中正则表达式的用法实例汇总
2014/08/18 Python
Fiddler如何抓取手机APP数据包
2016/01/22 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
python多线程并发及测试框架案例
2019/10/15 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
欧洲最大的笔和书写专家:The Pen Shop
2017/03/19 全球购物
行政主管职责范本
2014/03/07 职场文书
家教广告词
2014/03/19 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
刑事案件上诉状
2015/05/23 职场文书
2016开学第一课心得体会
2016/01/23 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js