码迷,mamicode.com
首页 > Web开发 > 详细

HTML5 Canvas彩色小球碰撞运动特效

时间:2016-06-22 15:50:23      阅读:228      评论:0      收藏:0      [点我收藏+]

标签:

脚本简介

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彩色小球碰撞运动特效

标签:

原文地址:http://www.cnblogs.com/roucheng/p/html5ball.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!