在canvas中使用其他HTML元素

做一个功能如下图，随机生成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>

巴特西

在canvas中使用其他HTML元素

最新文章

热门文章