<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <canvas id="canvas" width="400" height="400" style="background:gray;"></canvas>

    <script>

        var canvas = document.getElementById('canvas')

        var context = canvas.getContext('2d')

        function Ball(x, y, dx, dy, radius, color) {

            this.x = x

            this.y = y

            this.dx = dx

            this.dy = dy

            this.radius = radius

            this.color = color

        }

        var balls = []

        balls.push(new Ball(11, 111, 10, 5, 10, 'black'))

        balls.push(new Ball(31, 11, 5, 5, 10, 'green'))

        balls.push(new Ball(61, 41, 10, 5, 10, 'red'))

        function move() {

            context.clearRect(0, 0, canvas.width, canvas.height)

            balls.forEach(function(ball) {

                context.beginPath()

                ball.x += ball.dx

                ball.y += ball.dy

                if (ball.x < ball.radius || ball.x > canvas.width - ball.radius) {

                    ball.dx = -ball.dx

                }

                if (ball.y <  ball.radius || ball.y > canvas.height - ball.radius) {

                    ball.dy = -ball.dy

                }

                context.fillStyle = ball.color

                context.strokeStyle = ball.color

                context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false)

                context.stroke()

                context.fill()

            })

            window.requestAnimationFrame(move)

        }

        window.requestAnimationFrame(move)

    </script>

</body>

</html>

-_-#【Canvas】回弹的更多相关文章

  1. HTML5 canvas入门

    HTML5 Canvas入门 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. ...

  2. js封装成插件-------Canvas统计图插件编写

    之前就说过,我想写一个canvas画统计图的插件,现在写好了 先说下实现的功能吧: 1.可以通过自定义X轴坐标属性和Y轴坐标属性按比例画出统计图 2.可以选择画折现图还是柱形统计图,或者两者都实现 3 ...

  3. 移动端图表插件jChart.js的修改

    bug1: 折线图,设置datasetGesture : true时,Y轴的刻度值居然会变.会变也就算了,居然没地方设置不能变. bug2: 折线图,设置tap.point事件,和datasetGes ...

  4. 【译】使用 Rust 和 WebAssembly 构建离线画图页面

    原文地址:https://dev.to/sendilkumarn/create-dev-s-offline-page-with-rust-and-webassembly-21gn 原文仓库:https ...

  5. Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客

    Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客 Canvas之动态波浪效果 (2012-04-26 09:04:51) 转载▼

  6. 自定义控件之Canvas图形绘制基础练习-青春痘笑脸^_^

    对于自定义控件的意义不言而喻,所以对它的深入研究是很有必要的,前些年写过几篇关于UI效果的学习过程,但是中途比较懒一直就停滞了,而对于实际工作还是面试来说系统深入的了解自定义控件那是很有必要的,所以接 ...

  7. -_-#【Canvas】FPS

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. -_-#【Canvas】转成黑白

    function drawInBlackAndWhite() { var imagedata = context.getImageData(0, 0, canvas.width, canvas.hei ...

  9. -_-#【Canvas】measureText, translate, drawImage

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

随机推荐

  1. 1小时学Python脚本

    如果我们有这么一项任务:简单測试局域网中的电脑是否连通.这些电脑的ip范围从192.168.0.101到192.168.0.200.        思路:用shell编程.(Linux一般是bash而 ...

  2. 一行代码实现iOS序列化与反序列化(runtime)

    一.变量声明 为便于下文讨论,提前创建父类Biology以及子类Person: Biology: @interface Biology : NSObject { NSInteger *_hairCou ...

  3. 尚未解决的intellij问题：补充措施

    2016-12-06 遇到问题 D:\software\apache-tomcat-7.0.57\bin\catalina.bat run [2016-12-06 09:54:52,342] Arti ...

  4. Linux磁盘管理：LVM逻辑卷基本概念及LVM的工作原理

    一.传统的磁盘管理 其实在Linux操作系统中,我们的磁盘管理机制和windows上的差不多,绝大多数都是使用MBR(Master Boot Recorder)都是通过先对一个硬盘进行分区,然后再将该 ...

  5. OD: Kernel Exploit - 2 Programming

    本节接前方,对 exploitme.sys 进行利用. exploitme.sys 存在任意地址写任意内容的内核漏洞,现在采用执行 Ring0 Shellcode 的方式进行利用. 获取 HalDis ...

  6. asp.net上传文件并创建文件夹和删除文件

    上传文件部分代码: /// <summary> /// 上传保存文件并返回文件的保存地址和文件名称 /// </summary> /// <param name=&quo ...

  7. Android开发手记(21) 遍历文件夹

    我们在遍历文件夹的时候由于涉及到SD卡相关操作,所以我们需要添加如下权限: <uses-permission android:name="android.permission.WRIT ...

  8. iOS开发实现登陆

    Assumption假设:iOS端加载Web页,然后用户输入用户名密码登陆,WebServer会把用户登陆信息记载在Cookie.那么iOS客户端如何取到Cookie中的登陆信息. 客户端监听 NSH ...

  9. java学习——IO流

    字符流的由来:其实就是:字节流读取文字字节数据后,不直接操作而是先查指定的编码表.获取对应的文字.在对这个文字进行操作.简单说:字节流+编码表 ---------------------------- ...

  10. java记事本

    新知识点 1.撤销 textArea添加一个实现监听接口的类(添加了之后可以一直监视着添加的删除的情况,以便来撤销 textArea.getDocument().addUndoableEditList ...