做一个功能如下图,随机生成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元素的更多相关文章

  1. 在canvas中使用html元素

    让div悬浮于canvas之上   使用z-index控制层及顺序 慕课网canvas demo <div id="canvas-wrapper"> <canva ...

  2. Canvas中鼠标获取元素并拖动技术

    Silverlight拖动,需要Canvas. Canvas管网定义: 定义一个区域,在该区域中可以使用相对于该区域的坐标显式定位子元素. XAML <Canvas ...> oneOrM ...

  3. Canvas中如何画一条清晰的线宽为奇数(如1px逻辑像素)的线?

    我在开发中使用canvas的机会不是很多,但是第一次实际使用中就遇到了问题,"很久很久以前,我自己画了一个雷达图,线宽都是1像素,但是显示效果不如期望,这才发现canvas中的画线还是有坑的 ...

  4. Canvas中绘制贝塞尔曲线

    ① 什么是贝塞尔曲线? 在数学的数值分析领域中,贝济埃曲线(英语:Bézier curve,亦作“贝塞尔”)是计算机图形学中相当重要的参数曲线.更高维度的广泛化贝济埃曲线就称作贝济埃曲面,其中贝济埃三 ...

  5. &lt;canvas&gt;中isPointInPath()方法在不同绘制内容中的效果

    <canvas>是HTML5中新增加的一个元素,我们可以使用脚本(通常使用JavaScript)在上面绘制图形,就像个画布一样.我们可以用它来绘制图表.制作一些动画.默认大小为300px ...

  6. Canvas中的save方法和restore方法

    初学者也许会误认为canvas中save方法是用来保存绘图状态的图形,而restore方法是用来还原之前保存的绘图状态的图形,其实不然. save():保存当前的绘图状态. restore():恢复之 ...

  7. CSS中不定宽块状元素的水平居中显示

    CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...

  8. JavaScript从数组中删除指定值元素的方法

    本文实例讲述了JavaScript从数组中删除指定值元素的方法.分享给大家供大家参考.具体分析如下: 下面的代码使用了两种方式删除数组的元素,第一种定义一个单独的函数,第二种为Array对象定义了一个 ...

  9. JS 验证数组中是否包含重复元素

    验证JS中是否包含重复元素,有重复返回true:否则返回false 方案一. function isRepeat(data) { var hash = {}; for (var i in data) ...

  10. HTML5在canvas中绘制复杂形状附效果截图

    HTML5在canvas中绘制复杂形状附效果截图 一.绘制复杂形状或路径 在简单的矩形不能满足需求的情况下,绘图环境提供了如下方法来绘制复杂的形状或路径. beginPath() : 开始绘制一个新路 ...

随机推荐

  1. Java JVM、JNI、Native Function Interface、Create New Process Native Function API Analysis

    目录 . JAVA JVM . Java JNI: Java Native Interface . Java Create New Process Native Function API Analys ...

  2. POJ1088滑雪(记忆化搜索+DFS||经典的动态规划)

      Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 84297   Accepted: 31558 Description M ...

  3. linux重启和关闭系统命令

    重启命令: 1.reboot 2.shutdown -r now 立刻重启(root用户使用) 3.shutdown -r 10 过10分钟自动重启(root用户使用) 4.shutdown -r 2 ...

  4. Oracle 的简单描述

    在 Oracle 开发中,客户端把 SQL 语句发送给服务器,服务器对 SQL 语句进行编译.执行,把执行的结果返回给客户端. Oracle SQL 语句由如下命令组成:  数据定义语言( DDL) ...

  5. display的小故事

    实在是想不出来到底整个什么题目好..姑且先整这个吧.. 本文不是讲解display这个牛逼css属性的(讲不好才是真的!),主要是分享一下一些小Tips. display:table-cell wid ...

  6. java使用for循环做猜数字游戏

    package org.llh.test;import java.util.Random;import java.util.Scanner;/** * 猜数字游戏 *  * @author llh * ...

  7. WCF和委托

         WCF各个模块的联系: Contracts:一个类库项目,定义服务契约(Service Contract),引用System.ServiceMode程序集(WCF框架的绝大部分实现和API定 ...

  8. python 中的类

    1.1 类里面包括:类的属性.方法 OO的特征(Object Oriented) 封装:信息隐蔽技术 继承:继承是子类自动共享父类之间数据和方法的机制 >>> class MyCla ...

  9. input:checked + label用法

    input:checked ~ label   :相邻同胞选择器,选择被选中的input标签后 所有的label标签[input  和 label标签有共同的父元素]: input:checked + ...

  10. node多文件处理方法

    let events = require('events'); let fs = require('fs'); // 将readfile封装成一个方法 多文件处理  function fnreadFi ...