脚本简介

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. [译]WebForms vs. MVC

    译者介绍 小小.NET学童,滴答…滴答…的雨…… 正文如下======================================================= 原文示例(VS2012): 1 ...

  2. ReactJS入门（一）—— 初步认识React

    React刚开始红的时候,由于对其不甚了解,觉得JSX的写法略非主流,故一直没打算将其应用在项目上,随着身边大神们的科普,才后知后觉是个好东西. 好在哪里呢?个人拙见,有俩点: 1. 虚拟DOM —— ...

  3. .NET单元测试的艺术-3.测试代码

    开篇:上一篇我们学习单元测试和核心技术:存根.模拟对象和隔离框架,它们是我们进行高质量单元测试的技术基础.本篇会集中在管理和组织单元测试的技术,以及如何确保在真实项目中进行高质量的单元测试. 系列目录 ...

  4. MySQL mysqlslap压测

    200 ? "200px" : this.width)!important;} --> 介绍 mysqlslap是mysql自带的一个性能压测工具:mysqlslap用于和其 ...

  5. IIS部署Remoting总结

    1.在IIS里新建一个网站,命名为test,路径指向 e:\test: 2.在 e:\test下创建目录bin: 3.把Remoting远程对象的Project设置为类库,编译为DLL文件,然后复制到 ...

  6. iOS 代码规范

    1 目的 统一规范XCode编辑环境下Objective-C.swift的编码风格和标准 2 适用范围 适用于所有用Objective-C,swift语言开发的项目. 3 编码规范 3.1 文件 项目 ...

  7. iOS---后台运行机制详解

    一.iOS的“伪后台”程序 首先,先了解一下iOS 中所谓的「后台进程」到底是怎么回事吧? Let me be as clear as I can be: the iOS multitasking b ...

  8. MongoDB replica set IDs do not match

    在搭建MongoDB(版本 3.2.9)的Replica Set时,使用 rs.status() 查看Replica Set的状态,发现一个成员异常:replica set IDs do not ma ...

  9. jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + div.aaron input[type="checkb ...

  10. 简单生成svg文件

    this.fileSaveSync = function (file, data) { var fs = require('fs-extra'); fs.writeFileSync(file, dat ...