脚本简介

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. Nova PhoneGap框架 第二章 理解index.html

    跟绝大多数PhoneGap程序一样,Index.html是程序的入口.这个页面应该完成应用程序的初始化工作. 首先,让我们来看看这个页面通常都长什么样子: 下面我将一一解释这个页面都做了哪些初始化工作 ...

  2. Android N 多窗口模式，你需要知道的一切

    Android N中最大.最引人注意的变化就是Mutil-window模式.对于一个开发者,我们最关心的就是:Mutil-window模式下怎么配置mutil-window模式.Activity的生命 ...

  3. Azure PowerShell (9) 使用PowerShell导出订阅下所有的Azure VM的Public IP和Private IP

    <Windows Azure Platform 系列文章目录> 笔者在之前的工作中,有客户提出想一次性查看Azure订阅下的所有Azure VM的Public IP和Private IP. ...

  4. Could not load type 'System.Reflection.AssemblySignatureKeyAttribute' from assembly 'mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c

    错误: Could not load type 'System.Reflection.AssemblySignatureKeyAttribute' from assembly 'mscorlib, V ...

  5. JQuery学习思维导图版

    常用UI资源 参考资料:Jquery教程 dataTables:教程  中文教程 Wizard:教程 Jquery UI demos:教程 selectmenu:教程 jquery-slider:教程 ...

  6. Android笔记——SQLiteOpenHelper类

    public 抽象类 SQLiteOpenHelper 继承关系 Java.lang.Object android.database.sqlite.SQLiteOpenHelper 类概要 这是一个辅 ...

  7. PHP中的list()说明

    list() 用于在一次操作中给一组变量赋值. 注释:list()只用于数字索引的数组,且假定数字索引从 0 开始. 说明 list() 用数组中的元素为一组变量赋值. 注意,与 array() 类似 ...

  8. selenium结合最新版的sikuli使用

    sikuli安装,下载sikulixsetup-1.1.0.jar,地址:https://launchpad.net/sikuli/sikulix/1.1.0 在装有Java环境的机器上直接双击jar ...

  9. Javascript学习记录——原生JS实现旋转木马特效

    昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...

  10. Gridview里添加合计行

    ShowFooter="true" ; ; ; protected void gvIncomeYG_RowDataBound(object sender, GridViewRowE ...