欢迎使用CSDN-markdown编辑器

来源：互联网发布：python需要设计模式吗编辑：程序博客网时间：2024/06/06 01:00
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>
阅读全文
0 0