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 相关文章推荐
js事件冒泡实例分享(已测试)
Apr 23 Javascript
基于js disabled=&quot;false&quot;不起作用的解决办法
Jun 26 Javascript
浅谈JavaScript Date日期和时间对象
Dec 29 Javascript
简介AngularJS中使用factory和service的方法
Jun 17 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
May 24 Javascript
JS遍历对象属性的方法示例
Jan 10 Javascript
微信小程序 扎金花简单实例
Feb 21 Javascript
node.js基于express使用websocket的方法
Nov 09 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
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上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
php中使用Ajax时出现Error(c00ce56e)的详细解决方案
2014/11/03 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
谈谈PHP连接Access数据库的注意事项
2016/08/12 PHP
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
js获取数组的最后一个元素
2015/04/14 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
jquery利用json实现页面之间传值的实例解析
2016/12/12 Javascript
JavaScript正则表达式exec/g实现多次循环用法示例
2017/01/17 Javascript
解决vue里碰到 $refs 的问题的方法
2017/07/13 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
2017/08/06 Javascript
利用Decorator如何控制Koa路由详解
2018/06/26 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
JS使用队列对数组排列,基数排序算法示例
2019/03/02 Javascript
图解javascript作用域链
2019/05/27 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
微信小程序停止其他视频播放当前视频的实例代码
2019/12/25 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
python中re模块知识点总结
2021/01/17 Python
英国领先的奢侈品零售商之一:CRUISE
2016/12/02 全球购物
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
《雨点儿》教学反思
2014/04/14 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
村支部书记群众路线对照检查材料思想汇报
2014/10/08 职场文书
债务授权委托书范本
2014/10/17 职场文书
2014年行政助理工作总结
2014/11/19 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
2016年小学圣诞节活动总结
2016/03/31 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang