脚本简介

HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效。
 
 
效果图如下:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas彩色小球碰撞运动特效 - 何问起</title>
<base target="_blank" /> <style>
#hovertreeball {
border: 1px dashed #999;
box-shadow: 0px 4px 40px #233;
background: black;
}
.hovertreeinfo{text-align:center;}
a{color:blue;}
</style>
</head>
<body>
<div class="hovertreeinfo" >
提示:可以点击按钮改变背景颜色<br />
<canvas id="hovertreeball" width="800" height="600"></canvas>
</div>
<script type="text/javascript">
var canvas = document.getElementById("ho"+"vertreeball");
var context = canvas.getContext("2d");
var maxWidth = canvas.width;
var maxHeight = canvas.height;
var colors = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"] //随机数
function random(min, max) {
return Math.floor(Math.random() * (max - min) + min)
} //构造函数
function Ball() {
this.a = true;
this.b = true;
this.r = random(10, 30);
this.ballColor = { color: colors[Math.floor(Math.random() * colors.length)] }
this.vx = random(30, maxWidth - 30);
this.vy = random(30, maxHeight - 30);
this.ispeed = random(1, 10);
this.ispeed2 = random(1, 10);
} // 面向对象
Ball.prototype.moveBall = function () {
context.beginPath();
if (this.a) {
this.vx += this.ispeed;
if (this.vx >= maxWidth - this.r) {
this.a = false;
} } else {
this.vx -= this.ispeed;
if (this.vx <= this.r) {
this.a = true;
}
} if (this.b) {
this.vy += this.ispeed2;
if (this.vy >= maxHeight - this.r) {
this.b = false;
} } else {
this.vy -= this.ispeed2;
if (this.vy <= this.r) {
this.b = true;
}
} context.fillStyle = this.ballColor.color;
context.arc(this.vx, this.vy, this.r, 0, Math.PI * 2, false);
context.fill();
} var Aball = [];
for (var i = 0; i < 100; i++) {
Aball[i] = new Ball();
} setInterval(function () {
context.clearRect(0, 0, canvas.width, canvas.height)
for (var i = 0; i < 100; i++) {
Aball[i].moveBall();
} }, 30)
function hovertreecolor() {
if (canvas.style.backgroundColor != "white") {
canvas.style.backgroundColor = "white";
}
else {
canvas.style.backgroundColor = "black";
}
}
</script> <div style="text-align:center;margin:10px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<button id="hovertreechange">改变背景颜色</button>
<p>适用浏览器:FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗等. 不支持IE8及以下浏览器。</p>
<p>来源:<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/menu/texiao/">网页特效</a>
<a href="http://hovertree.com/h/bjaf/mll8cpr3.htm">代码说明</a></p>
</div>
<script>
document.getElementById("hover" + "treechange").addEventListener("click", hovertreecolor)
</script>
</body>
</html>

转自:http://hovertree.com/h/bjaf/mll8cpr3.htm

更多特效:http://www.cnblogs.com/roucheng/p/texiao.html

HTML5 Canvas彩色小球碰撞运动特效的更多相关文章

  1. 【HTML】html5 canvas全屏烟花动画特效

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. 用HTML5 Canvas为Web图形创建特效

    HTML5 Canvas 将使用像素在屏幕上绘制图形图像. 本节演示了五种用于操作像素以创建摄影特效的 Canvas 技术. 您可使用这些技术来生成独具特色的图像,为您的网站.博客.视频游戏画面.广告 ...

  3. 基于HTML5 Canvas粒子效果文字动画特效

    之前我们分享过很多超酷的文字特效,其中也有利用HTML5和CSS3的.今天我们要来分享一款基于HTML5 Canvas的文字特效,输入框中输入想要展示的文字,回车后即可在canvas上绘制出粒子效果的 ...

  4. html5 canvas实现图片玻璃碎片特效

    今天要为大家带来一款html5 canvas实现的图片玻璃碎片特效.图片以玻璃碎片的形式出现到界面中,然后似玻璃被打碎的效果渐消息.效果图如下: 在线预览   源码下载 实现代码: html代码: & ...

  5. 基于 HTML5 Canvas 实现的文字动画特效

    前言 文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的.文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态的效果来提醒用户阅读. ...

  6. 4款基于html5 canvas充满想象力的重力特效

    今天给大家分享4个物理和重力实验,用来展示 html canvas 的强大.几年前,所有这些实验都必须使用 Java 或 Flash 才能做.在下面这些惊人的例子中,就个人而言,我比较喜欢仿真布料的那 ...

  7. 16个富有创意的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  8. 16个非常有趣的HTML5 Canvas动画特效集合

    HTML5技术正在不断的发展和更新,越来越多的开发者也正在加入HTML5阵营,甚至在移动开发上HTML5的地位也是越来越重要了.HTML5中的大部分动画都是通过Canvas实现,因为Canvas就像一 ...

  9. 基于HTML5 Canvas实现的图片马赛克模糊特效

    效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...

随机推荐

  1. python备忘

    1.引用已经编写好的.py文件(Windows系统) >>>import sys >>>sys.path.append("C:/python") ...

  2. 网络编程---HTTP

    URL: 什么是URL ? URL的全称是Uniform Resource Locator(统一资源定位符) 通过1个URL,能找到互联网上唯一的1个资源 URL就是资源的地址.位置,互联网上的每个资 ...

  3. NM常用网络命令

    Ipconfig命令 Ipconfig命令可以被用来显示机器当前TCP/IP配置信息. 当使用Ipconfig时不带不论什么參数选项,那么它为每一个已经配置好的接口显示IP地址.子网掩码和默认网关值. ...

  4. Python系列之反射、面向对象

    一.反射 说反射之前先介绍一下__import__方法,这个和import导入模块的另一种方式 1. import commons 2. __import__('commons') 如果是多层导入: ...

  5. Angular i18n的技术分享、踩过的坑

    1.安装 npm @ngx-translate/core --save npm @ngx-translate/http-loader 2.配置(文本背景部分为该模块新增的)~app.module.ts ...

  6. 关于python的315道题

    python基础篇 为什么学习Python? 通过什么途径学习的Python? Python和Java.PHP.C.C#.C++等其他语言的对比? 简述解释型和编译型编程语言? Python解释器种类 ...

  7. shell tr命令

    tr 命令可以对来自标准输入的字符进行替换.压缩和删除. tr 指令从标准输入设备读取数据,经过字符串转译后,将结果输出到标准输出设备. tr 常用参数 -c # 用字符串1中字符集的补集替换此字符集 ...

  8. ztree默认自动打开第一级

    var treeObj = $.fn.zTree.getZTreeObj("tree"); var nodes = treeObj.getNodes(); if (nodes.le ...

  9. 多级菜单系统安装维护shell脚本实现企业级案例

    演示效果: 1.一级菜单 2.二级菜单 3.执行操作 脚本参考: #!/bin/bash #author lic(oldboy linux student) #date 1304 DISK_NO=&q ...

  10. 给easyui datebox时间框控件扩展一个清空的实例

    给easyui datebox扩展一个清空的实例 步骤一:拓展插件 /** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; ( ...