做一个功能如下图，随机生成100个大小、颜色随机的小球。点击开始运动的时候，小球开始运动，然后点击停止运动的时候，小球停止运动。 点击旁边的白色或者黑色，则背景颜色变为相应的颜色。

 

HTML部分:
<body>
    <div id="canvas-wrapper">
        <canvas id="canvas" style="border: 1px solid #aaa;display:block;margin:0 auto"></canvas>
        <div id="controller">
            <h1>Canvas 绘图之旅</h1>
            <a href="#" id="canvas-btn">停止运动</a>
            <a href="#" class="color-btn" id="white-color-btn">&nbsp;</a>
            <a href="#" class="color-btn" id="black-color-btn">&nbsp;</a>
        </div>
    </div>
</body>

 

css部分:
 
<style>
        #canvas-wrapper {
            width: 1200px;
            height: 600px;
            position: relative;
            margin: 0 auto;
        }

        #canvas {
            border: 1px solid #aaa;
        }

        #controller {
            position: absolute;
            top: 30px;
            left: 30px;
            background-color: rgba(0, 85, 116, 0.7);
            padding: 5px 20px 25px 20px;
            border-radius: 10px;
        }

        #controller h1 {
            color: #fff;
            font-weight: bold;
        }

        #controller #canvas-btn {
            display: inline-block;
            background-color: #8b0;
            color: #fff;
            font-size: 14px;
            padding: 5px 15px;
            border-radius: 6px;
            text-decoration: none;
            margin-top: 10px;
            margin-right: 20px;
        }

        #controller #canvas-btn:hover {
            text-decoration: none;
            background-color: #7a0;
        }

        #controller .color-btn {
            display: inline-block;
            padding: 5px 15px;
            border-radius: 6px;
            font-size: 14px;
            margin-top: 10px;
            margin-right: 5px;
            text-decoration: none;
        }

        #controller .color-btn:hover {
            text-decoration: none;
        }

        #controller #white-color-btn {
            background-color: #fff;
        }

        #controller #black-color-btn {
            background-color: #000;
        }
    </style>

 

js部分:
<script>  
    var balls = [];     //小球的容器
    var isMoving = true;    //控制小球是否运动
    var themeColor = "#fff";    //控制背景颜色
    window.onload = function () {
        var canvas = document.getElementById("canvas");

        canvas.width = 1200;
        canvas.height = 600;

        if (canvas.getContext("2d")) {

            var context = canvas.getContext("2d");

            //做100个大小、颜色随机的小球
            for (var i = 0; i < 100; i++) {
                var R = Math.floor(Math.random() * 255);
                var G = Math.floor(Math.random() * 255);
                var B = Math.floor(Math.random() * 255);
                var radius = Math.random() * 50 + 20;

                aBall = {
                    color: "rgb(" + R + "," + G + "," + B + ")",
                    x: Math.random() * (canvas.width - 2 * radius) + radius,
                    y: Math.random() * (canvas.height - 2 * radius) + radius,
                    vx: (Math.random() * 5 + 5) * Math.pow(-1, Math.floor(Math.random() * 100)),
                    vy: (Math.random() * 5 + 5) * Math.pow(-1, Math.floor(Math.random() * 100)),
                    radius: radius
                }
                balls[i] = aBall;
            }

            setInterval(
                function () {
                    draw(context);
                    //isMoving为true的时候运行update函数，改变小球位置，小球进行运动
                    if (isMoving) {
                        update(canvas.width, canvas.height);
                    }
                }
                ,
                50
            )

            //点击按钮控制按钮文字与小球是否运动
            document.getElementById("canvas-btn").onclick = function (event) {
                if (isMoving) {
                    isMoving = false;
                    this.text = "开始运动";
                } else {
                    isMoving = true;
                    this.text = "停止运动";
                }
                return false;
            }

            //点击按钮控制背景颜色
            document.getElementById("white-color-btn").onclick = function (event) {
                themeColor = "#fff";
                return false;
            }

            document.getElementById("black-color-btn").onclick = function (event) {
                themeColor = "#000";
                return false;
            }
        } else {
            alert('您的浏览器不支持canvas,请更换浏览器尝试~')
        }
    }

    //进行绘制
    function draw(cxt) {

        var canvas = cxt.canvas;
        cxt.clearRect(0, 0, canvas.width, canvas.height);

        if (themeColor === "#000") {
            cxt.fillStyle = "#000";
            cxt.fillRect(0, 0, canvas.width, canvas.height);
        }

        for (var i = 0; i < balls.length; i++) {
            cxt.fillStyle = balls[i].color;
            cxt.beginPath();
            cxt.arc(balls[i].x, balls[i].y, balls[i].radius, 0, Math.PI * 2);
            cxt.closePath();
            cxt.fill();
        }
    }

    //控制小球运动的函数
    function update(canvasWidth, canvasHeight) {

        for (var i = 0; i < balls.length; i++) {
            balls[i].x += balls[i].vx;
            balls[i].y += balls[i].vy;

            if (balls[i].x - balls[i].radius <= 0) {
                balls[i].vx = -balls[i].vx;
                balls[i].x = balls[i].radius;
            }

            if (balls[i].x + balls[i].radius >= canvasWidth) {
                balls[i].vx = -balls[i].vx;
                balls[i].x = canvasWidth - balls[i].radius;
            }

            if (balls[i].y - balls[i].radius <= 0) {
                balls[i].vy = -balls[i].vy;
                balls[i].y = balls[i].radius;
            }

            if (balls[i].y + balls[i].radius >= canvasHeight) {
                balls[i].vy = -balls[i].vy;
                balls[i].y = canvasHeight - balls[i].radius;
            }

        }

    }


</script>

 

版权声明：本文为littleSpill原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/littleSpill/p/11351831.html