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 自定义的联动下拉框
Feb 07 Javascript
jquery uaMatch源代码
Feb 14 Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
Jan 22 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 08 Javascript
js中实例与对象的区别讲解
Jan 21 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
Feb 27 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
jquery插件实现悬浮的菜单
Apr 24 jQuery
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 一个页面执行时间类代码
2010/03/05 PHP
PHP基于php_imagick_st-Q8.dll实现JPG合成GIF图片的方法
2014/07/11 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
php array_merge_recursive 数组合并
2016/10/26 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
javascript中的注释使用与注意事项小结
2011/09/20 Javascript
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
jQuery中DOM树操作之复制元素的方法
2015/01/23 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
快速掌握jQuery插件开发
2017/01/19 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
微信小程序实现左右列表联动
2020/05/19 Javascript
小程序中英文混合排序问题解决
2019/08/02 Javascript
Vue v-text指令简单使用方法示例
2019/09/19 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
Windows下Python的Django框架环境部署及应用编写入门
2016/03/10 Python
Python面向对象特殊成员
2017/04/24 Python
python 三种方法提取pdf中的图片
2021/02/07 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
什么是.net的Remoting技术
2016/07/08 面试题
自荐书格式
2013/12/01 职场文书
高一新生军训感言
2014/03/02 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
学校读书活动总结
2014/06/30 职场文书
政协调研汇报材料
2014/08/15 职场文书
2014年招生工作总结
2014/11/26 职场文书
药店营业员岗位职责
2015/04/14 职场文书
Python实战之实现简易的学生选课系统
2021/05/25 Python
OpenCV实现反阈值二值化
2021/11/17 Java/Android