zoukankan      html  css  js  c++  java
  • 在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>
  • 相关阅读:
    datanode报错Problem connecting to server
    使用命令查看hdfs的状态
    Access denied for user root. Superuser privilege is requ
    ElasticSearch默认的分页参数 size
    SparkStreaming Kafka 维护offset
    【容错篇】Spark Streaming的还原药水——Checkpoint
    251 Android 线性与相对布局简介
    250 Android Studio使用指南 总结
    249 如何解决项目导入产生的中文乱码问题
    248 gradle更新问题
  • 原文地址:https://www.cnblogs.com/littleSpill/p/11351831.html
Copyright © 2011-2022 走看看