做一个功能如下图,随机生成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. 图片在 canvas 中的 选中/平移/缩放/旋转,包含了所有canvas的2D变化,让你认识到数学的重要性

    1.介绍 canvas 已经出来好久了,相信大家多少都有接触. 如果你是前端页面开发/移动开发,那么你肯定会有做过图片上传处理,图片优化,以及图片合成,这些都是可以用 canvas 实现的. 如果你是 ...

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

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

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

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

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

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

随机推荐

  1. 使用ViewPager+Fragment实现选项卡切换效果

    实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...

  2. Python的Set和List的性能比较 + 两者之间的转换

    1.能用set 不用list ~$ python -m timeit -n 1000 "[x for x in range(1000) if x in range(500, 1500)]&q ...

  3. 使用Nginx负载均衡搭建高性能.NETweb应用程序一

    一.遇到的问题 当我们用IIS服务器部署了一个web应用以后,当很多用户高并发访问的时候,客户端响应就会很慢,客户的体验就会很差,由于IIS接受到客户端请求的 时候,就会创建一个线程,当线程达到几千个 ...

  4. C语言 文件操作12--文件加密

    //文件加密解密 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include ...

  5. TYVJ P1038/P1039 忠诚 标签:线段树

    做题记录:2016-08-12 16:30:14 //P1038 描述 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记k次账,由于管家聪明能干,因而管家 ...

  6. php程序员的弱点

    今天在在知乎上看到一个问题,题目是<看了laravel的php框架怎么感觉很不靠谱?>,我最近也在想学习一下laravel,laravel听说是受到很大ruby on rails的影响. ...

  7. BNU OJ 51005 BQG&#39;s Quadrilateral Bricks

    #include<cstdio> #include<cstring> #include<cmath> #include<vector> #include ...

  8. hadoop伪分布式环境搭建

    环境:Centos6.9+jdk+hadoop1.下载hadoop的tar包,这里以hadoop2.6.5版本为例,下载地址https://archive.apache.org/dist/hadoop ...

  9. 1052. Linked List Sorting (25)

    题目如下: A linked list consists of a series of structures, which are not necessarily adjacent in memory ...

  10. Luogu4492 [HAOI2018]苹果树 【动态规划】

    题目分析: 思路不难想,考虑三个dp状态$f,g,d$. $g[i]$表示有$i$个点的堆的数量 $d[i]$表示有$i$个点的情况下所有的方案数中点到根的距离和 $f[i]$表示要求的答案. 不难发 ...