如何用JavaScript写个炫彩小球页面？

最新推荐文章于 2024-05-31 10:26:40 发布
最新推荐文章于 2024-05-31 10:26:40 发布
阅读量118 收藏
点赞数
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/u/180480/blog/2248983
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

先看看效果：

页面可以不断自动产生大小、颜色不一的炫彩小球，一段时间会自动消失；此外，鼠标移动也可以产生小球，也会自动消失；底部做了几个工具按钮，可以控制小球大小、数量、消失速度等。 image.png

1、小球对象

<script>
function Ball(x, y, r, color) {
	this.x = x || 0;
	this.y = y || 0;
	this.radius = r || 20;
	this.color = color || '#09f';
}
Ball.prototype = {
	constructor: Ball,
	stroke: function (cxt) {
		cxt.strokeStyle = this.color;
		cxt.beginPath();
		cxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
		cxt.closePath();
		cxt.stroke();
	},
	fill: function (cxt) {
		cxt.fillStyle = this.color;
		cxt.beginPath();
		cxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
		cxt.closePath();
		cxt.fill();
	},
	update : function( balls ){
		this.x += this.vx;
		this.y += this.vy;
		this.radius--;
		if ( this.radius < 0 ) {
			for( var i = 0; i < balls.length; i++ ){
				if( balls[i] == this ) {
					balls.splice( i, 1 );
				}
			}
			return false;
		}
		return true;
	}
}
</script>

2、产生随机小球代码

//一些初始变量
var size = 100;
var intervalTime = 50;
var rate = 1;

var ball,balls = [];
var inter;

var c=document.getElementById("myCanvas");
var oGc=c.getContext("2d");
var w=c['width'],h=c['height'];
init();
renderBall();

function init(){
	oGc.clearRect( 0, 0, w, h );
	oGc.fillStyle='#000000';
	oGc.fillRect(0,0,w,h);
}
//产生随机颜色
var getRandomColor = function(){    
  return  '#' +    
    (function(color){    
    return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])    
      && (color.length == 6) ?  color : arguments.callee(color);    
  })('');    
} 
//小球位置随机代码
function getRandPos() {
    return {'x':Math.random()*w,'y':Math.random()*h};
}
//小球大小随机代码
function getRandDis() {
    return (1-(Math.random()*2))*rate;
}
//源源不断产生小球
function renderBall(){
    inter = self.setInterval(function(){
        var pos = getRandPos();
        ball = new Ball( pos['x'], pos['y'], Math.random()*size, getRandomColor());
        ball.vx = getRandDis();
        ball.vy = getRandDis();
        balls.push( ball );
    }, intervalTime);
}
//使小球变得越来越小的代码
( function move(){
	init();
	for( var i = 0; i < balls.length; i++ ){
		balls[i].update( balls ) && balls[i].fill( oGc );
	}
	requestAnimationFrame(move);
} )();

3、跟随鼠标滑动产生小球

//监听鼠标移动并产生小球
c.addEventListener('mousemove', function( ev ){
    var oEvent = ev || event;
    var ball = new Ball( oEvent.clientX, oEvent.clientY, 30, getRandomColor());
    ball.vx = getRandDis();
    ball.vy = getRandDis();
    balls.push( ball );
}, false );

4、控制按钮代码

HTML:
<canvas id="myCanvas" width="1300" height="550"></canvas>
<div>
	<button onclick="configBall(1)">减小球</button>
	<button onclick="configBall(2)">增大球</button>
	<button onclick="configBall(3)">增加球</button>
	<button onclick="configBall(4)">减少球</button>
    <button onclick="configBall(5)">消失更快</button>
    <button onclick="configBall(6)">消失变慢</button>
</div>
JS:
function configBall(type){
	switch(type){
		case 1:
			this.size = (size <= 10 ? 10:size-10);
			break;
		case 2:
			this.size = (size >= h ? h:size+10);
			break;
		case 3:
			this.intervalTime = (intervalTime <= 5 ? 5:intervalTime-5);
			break;
        case 4:
            this.intervalTime += 5;
            break;
        case 5:
            rate = rate<<2;
            break;
        case 6:
            rate = rate>>2;
            break;
	}
    window.clearInterval(inter);
    renderBall();
}

最后，奉上全部代码，有兴趣的粘贴下来保存为“test.html”的文件用浏览器打开就能看到效果。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>test</title>
</head>
<script>
function Ball(x, y, r, color) {
	this.x = x || 0;
	this.y = y || 0;
	this.radius = r || 20;
	this.color = color || '#09f';
}
Ball.prototype = {
	constructor: Ball,
	stroke: function (cxt) {
		cxt.strokeStyle = this.color;
		cxt.beginPath();
		cxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
		cxt.closePath();
		cxt.stroke();
	},
	fill: function (cxt) {
		cxt.fillStyle = this.color;
		cxt.beginPath();
		cxt.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
		cxt.closePath();
		cxt.fill();
	},
	update : function( balls ){
		this.x += this.vx;
		this.y += this.vy;
		this.radius--;
		if ( this.radius < 0 ) {
			for( var i = 0; i < balls.length; i++ ){
				if( balls[i] == this ) {
					balls.splice( i, 1 );
				}
			}
			return false;
		}
		return true;
	}
}
</script>
<body>
<canvas id="myCanvas" width="1300" height="550"></canvas>
<div>
	<button onclick="configBall(1)">减小球</button>
	<button onclick="configBall(2)">增大球</button>
	<button onclick="configBall(3)">增加球</button>
	<button onclick="configBall(4)">减少球</button>
    <button onclick="configBall(5)">消失更快</button>
    <button onclick="configBall(6)">消失变慢</button>
</div>
<script>
var size = 100;
var intervalTime = 50;
var rate = 1;

var ball,balls = [];
var inter;

var c=document.getElementById("myCanvas");
var oGc=c.getContext("2d");
var w=c['width'],h=c['height'];
init();
renderBall();

function init(){
	oGc.clearRect( 0, 0, w, h );
	oGc.fillStyle='#000000';
	oGc.fillRect(0,0,w,h);
}

var getRandomColor = function(){    
  return  '#' +    
    (function(color){    
    return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])    
      && (color.length == 6) ?  color : arguments.callee(color);    
  })('');    
} 
function getRandPos() {
    return {'x':Math.random()*w,'y':Math.random()*h};
}
function getRandDis() {
    return (1-(Math.random()*2))*rate;
}

function renderBall(){
    inter = self.setInterval(function(){
        var pos = getRandPos();
        ball = new Ball( pos['x'], pos['y'], Math.random()*size, getRandomColor());
        ball.vx = getRandDis();
        ball.vy = getRandDis();
        balls.push( ball );
    }, intervalTime);
}

c.addEventListener('mousemove', function( ev ){
    var oEvent = ev || event;
    var ball = new Ball( oEvent.clientX, oEvent.clientY, 30, getRandomColor());
    ball.vx = getRandDis();
    ball.vy = getRandDis();
    balls.push( ball );
}, false );

( function move(){
	init();
	for( var i = 0; i < balls.length; i++ ){
		balls[i].update( balls ) && balls[i].fill( oGc );
	}
	requestAnimationFrame(move);
} )();

function configBall(type){
	switch(type){
		case 1:
			this.size = (size <= 10 ? 10:size-10);
			break;
		case 2:
			this.size = (size >= h ? h:size+10);
			break;
		case 3:
			this.intervalTime = (intervalTime <= 5 ? 5:intervalTime-5);
			break;
        case 4:
            this.intervalTime += 5;
            break;
        case 5:
            rate = rate<<2;
            break;
        case 6:
            rate = rate>>2;
            break;
	}
    window.clearInterval(inter);
    renderBall();
}
</script>
</body>
</html>

部分代码参考了其他文献，在此感谢！

转载于:https://my.oschina.net/u/180480/blog/2248983

weixin_34166472
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
canvas炫彩小球
03-26
使用canvas实现的炫彩小球案例，有利于理解canvas使用
canvas之炫彩小球
Webghost511的博客
08-07 250
这里实现了一个炫彩小球的小demo，直接来看代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
[js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球
weixin_33754065的博客
10-11 124
综合利用前面所学，实现一个绚丽的小球动画，这个实例用到的知识点，在我的博客全部都有，可以去这里查看所有的canvas教程 1 &lt;head&gt; 2 &lt;meta charset='utf-8' /&gt; 3 &lt;title&gt;canvas炫彩小球 - By ghostwu&lt;/title&gt; 4 &lt;style&gt; ...
HTML5之canvas彩色动感小球
蓝莓味的鱼
09-10 375
一：代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;小球&lt;/title&gt; &lt;style type="text/css"&gt; canvas{ border: 2px so
canvas - 炫彩小球
weixin_41040445的博客
12-13 177
<style> *{ margin: 0; padding: 0; } canvas { border: 1px solid #333; display: block; margin: 20px auto 0; } </style> <body> <canvas width="1200" height="800" id="mycanvas"&gt.
用JavaScript做一个炫彩小球的动画，鼠标移动产生小球，片刻小球消失。
weixin_44717047的博客
05-25 687
用JavaScript做一个炫彩小球的动画，鼠标移动产生小球，片刻透明度降低到0时，小球消失。
面向对象原生JavaScript案例炫彩小球
weixin_30278237的博客
04-25 98
面向对象其实对于初学者来说还是比较难以理解的，以前看到一个面试题目 面向对象是什么？ 面向对象是一种思想，千万别入坑了； 这次给大家带来的是一个鼠标移动产生小球的案例，不是我不想给大家分享如何去认识面向对象，因为我觉得，做案例比什么画图理解，或者是字面意思更好理解一点； 那么来吧宝贝； 先上点简单的CSS <style type="text/css"> ...
canvas实现鼠标跟随炫彩小球
Xwf1023的博客
09-09 281
canvas实现鼠标跟随炫彩小球
使用JavaScript库还是自己写代码？
10-29
有时候在写JavaScript添加到你的网页中的时候，你将需要决定是使用已有的可用的JavaScript库还是自己写所有代码。其中每个各有优缺点，因此没有任何一种方式对每个人来说都是绝对正确的选择。
用JAVASCRIPT帮我写个计数器
10-31
用JAVASCRIPT帮我写个计数器
教你使用javascript简单写一个页面模板引擎
12-09
于是我又想着能不能写一些简单的代码来完善这个模板引擎，又能与其它现有的逻辑协同工作。AbsurdJS本身主要是以NodeJS的模块的形式发布的，不过它也会发布客户端版本。考虑到这些，我就不能直接使用现有的引擎了，...
【redis】Spring之RedisTemplate配置与使用
05-30 334
转载：Spring之RedisTemplate配置与使用用过redis，但直接使用Jedis进行相应的交互操作，现在正好来看一下RedisTemplate是怎么实现的，以及使用起来是否更加便利。
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1204
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1091
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
山花的博客
05-30 526
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Vue3 - 实现一个雨水滴落的动画效果
良月柒
05-29 174
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
React-useState
weixin_46479909的博客
05-29 350
本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（useState是一个React Hook（函数），它允许我们向组件添加一个。，从而控制影响组件的渲染结果。
KeyExpirationEventMessageListener监听器的使用
最新发布
qq_47910339的博客
05-31 458
KeyExpirationEventMessageListener监听器的使用
javascript 页面跳转代码怎么写？
04-22
您可以使用以下 JavaScript 代码来实现页面跳转： ``` javascript // 页面跳转函数 function redirectTo(url) { window.location.href = url; } // 示例使用 redirectTo("https://www.example.com"); ``` 在...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值