脚本简介

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. io.js入门（二）—— 所支持的ES6（上）

    io.js的官网上有专门介绍其所支持的ES6特性的页面(点我查看),上面介绍到,相比nodeJS,io.js已从根本上支持了新版V8引擎上所支持的ES6特性,无需再添加任何运行时标志(如 --harm ...

  2. Lesson 4 An existing trip

    Text I have just received a letter from my brother,Tim. He is in Australia. He has been there for si ...

  3. node如何让一个端口同时支持https与http

    众所周知node是一个高性能的web服务器,使用它可以很简单的创建一个http或https的服务器. 比如一个很简单的http服务器: var http = require('http'); var ...

  4. Redis系列(五)-Opserver的监控

    阅读目录: 基本介绍 使用配置 部署实例 面板属性 基本介绍 Opserver是Stack Exchange的一个开源监控系统,基于Net.MVC开发,所以Net程序员可以轻松基于它二次开发.它主要监 ...

  5. 同步博客到CSDN

    经过一些朋友的多次邀请,现同步博客到CSDN,地址:http://blog.csdn.net/knightswarrior.

  6. 【干货】JS版汉字与拼音互转终极方案，附简单的JS拼音输入法

    前言 网上关于JS实现汉字和拼音互转的文章很多,但是比较杂乱,都是互相抄来抄去,而且有的不支持多音字,有的不支持声调,有的字典文件太大,还比如有时候我仅仅是需要获取汉字拼音首字母却要引入200kb的字 ...

  7. 花一分钟来看看Worktile是如何为团队协作而生的

    团队协作,我们想的更深.更远.更多,花一分钟来看看我们特别奉献的故事,然后去注册一个账号,邀请小伙伴一起来工作,你会体会Worktile才是真正懂你的协作方式.

  8. 2013 duilib入门简明教程 -- 界面设计器 DuiDesigner (10)

        上一个教程讲解了怎么布局最大化.最小化.关闭按钮,但是如果手动去计算这三个按钮的位置和大小的话,非常的不直观,也很不方便.     所以这一章准备介绍duilib的UI设计器,由于这个设计器很 ...

  9. Android笔记——数据库升级与降级

    一.概述 SQLite是Android内置的一个很小的关系型数据库.SQLiteOpenHelper是一个用来辅助管理数据库创建和版本升级问题的抽象类.我们可以继承这个抽象类,实现它的一些方法来对数据 ...

  10. css知多少（6）——选择器的优先级

    1. 引言 上一节<css知多少(5)——选择器>最后提到,选择器类型过多将导致一些问题,是什么问题呢?咱们直接举例子说明. 上图中,css中的两个选择器都是针对<span>的 ...