脚本简介

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. uniapp中用canvas实现小球碰撞的小动画

    uniapp 我就不想喷了,踩了很多坑,把代码贡献出来让大家少踩些坑. 实现的功能: 生成n个球在canvas中运动,相互碰撞后会反弹,反弹后的速度计算我研究过了,可以参考代码直接用 防止球出边框 防 ...

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

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

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

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

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

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

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

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

随机推荐

  1. 为什么google bazel构建工具流行不起来

    作者Jack47 转载请保留作者和原文出处 之前博主写了系列文章Google软件构建工具Bazel原理及使用方法介绍.最近使用了一段时间后,觉得这个东西不是一种通用的构建工具,很难对接到情况复杂的大的 ...

  2. 开发必备的Windows小技巧

    在Windows中我们经常会遇到各种小问题,而这些小问题又确实在影响着工作效率,如果能解决这些小问题,那么就能在一定程度上提高工作效率,保证心情愉悦.今天我就来分享一下几个自认为比较有用的小技巧. 保 ...

  3. 使用C#给Linux写Shell脚本（下篇）

    在上篇的<使用C#给Linux写Shell脚本>结尾中,我们留下了一个关于C#如何调用BashShell的问题.在文章发布之后,我留意到有读者留言推荐使用“Pash”(一款类PowerSh ...

  4. Python模拟HttpRequest的方法总结

    Python可以说是爬网的利器,本文主要介绍了一些python来模拟http请求的一些方法和技巧. Python处理请求的类库有两个,urllib,urllib2. 这两个类库并不是一个类库的两个不同 ...

  5. 部分安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法

    前端JS中使用XMLHttpRequest 2上传图片到服务器,PC端和大部分手机上都正常,但在少部分安卓手机上上传失败,服务器上查看图片,显示字节数为0.下面是上传图片的核心代码: HTML < ...

  6. jquery做一些小的特效

    在文本框里输入内容到添加到下拉列表里,移除下拉里的内容 1 <!DOCTYPE html> <html> <head> <meta charset=" ...

  7. C#中通过反射方法获取控件类型和名称

    这个方法是简单的也是神奇的. 有木有想过,将自己项目中的所有类型,包括自定义类型的命名空间和名称全部获取出来? 有木有想过,有一种简便的方法可以自动化管理项目中的控件和窗体? 有木有想过... 首先, ...

  8. webservice返回值为Map类型的处理方法

    在写一个webservice的时候,方法的返回值是一个复杂类型,处理方法是写一个结果类(Javabean)作为返回值.想着webservice方法返回值为Map的没写过,然后就试着写了一个简单的Dem ...

  9. TSQL 数据类型转换

    转换函数 cast 或 convert 将表达式类型转换成另一个数据类型,如果转换失败,将导致整个事务失败.SQL Server 2012 新增两个转换函数:try_cast 和 try_conver ...

  10. C#设计模式系列：迭代器模式（Iterator）

    迭代器模式把对象的职责分离,职责分离可以最大限度减少彼此之间的耦合程度,从而建立一个松耦合的对象.职责分离的要点是对被分离的职责进行封装,并以抽象的方式建立彼此之间的关系. 1.迭代器模式简介 1.1 ...