脚本简介

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. Verlet-js JavaScript 物理引擎

    subprotocol最近在Github上开源了verlet-js.地址为https://github.com/subprotocol/verlet-js.verlet-js是一个集成Verlet的物 ...

  2. Net作业调度(五)—quartz.net动态添加job设计

    介绍 在实际项目使用中quartz.net中,都希望有一个管理界面可以动态添加job,而避免每次都要上线发布. 也看到有园子的同学问过.这里就介绍下实现动态添加job的几种方式, 也是二次开发的核心模 ...

  3. Azure PowerShell (11) 使用自定义虚拟机镜像模板，创建Azure虚拟机并绑定公网IP(VIP)和内网IP(DIP)

    <Windows Azure Platform 系列文章目录> 前提要求: 1.假设笔者捕获一个Azure虚拟机模板,命名为leistorage 关于Azure虚拟机模板,请参考下图: 2 ...

  4. JavaScript利用replace更改所有符合条件字符

    利用replace替换字符串时,在正常使用情况下默认只能更改匹配到的第一个字符 var a=new String("fffffddd"); console.log(a.replac ...

  5. 决策树和基于决策树的集成方法（DT,RF,GBDT,XGBT）复习总结

    摘要: 1.算法概述 2.算法推导 3.算法特性及优缺点 4.注意事项 5.实现和具体例子 内容: 1.算法概述 1.1 决策树(DT)是一种基本的分类和回归方法.在分类问题中它可以认为是if-the ...

  6. 单节点部署Hadoop教程

    搭建HDFS 增加主机名 我这里仅仅增加了master主机名 [root@10 /xinghl/hadoop/bin]$ cat /etc/hosts 127.0.0.1 localhost 10.0 ...

  7. [Linux]Linux下安装和配置solr/tomcat/IK分词器 详细实例一.

    在这里一下讲解着三个的安装和配置, 是因为solr需要使用tomcat和IK分词器, 这里会通过图文教程的形式来详解它们的安装和使用.注: 本文属于原创文章, 如若转载,请注明出处, 谢谢.关于设置I ...

  8. php的函数和数组

    //php函数//1.简单函数//四要素:返回类型,函数名,参数列表,函数体/*function Show(){    echo "hello";}Show();*///2.有返回 ...

  9. Red Gate(SQLToolbelt)SQL Server的安装与注册(破解)

    Red Gate(SQLToolbelt)是SQL Server辅佐工具 1.SQL Compare 比较和同步SQL Server数据库结构 2.SQL Data Compare 比较和同步SQL ...

  10. .Net中List<T> 泛型转成DataTable、DataSet

    在开发过程过程中有时候需要将List<T>泛型转换成DataTable.DataSet,可以利用反射机制将DataTable的字段与自定义类型的公开属性互相赋值. 1.List<T& ...