<!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. PHP安全编程：更优的会话数据安全 更好地防范session暴露(转)

    当你关注于防止源码的暴露时,你的会话数据只同样存在着风险.在默认情况下,SESSION保存在/tmp目录下.这样做在很多情形下是很方便的,其中之一是所有用户都有对/tmp的写入权限,这样Apache同 ...

  2. [c#]如何在form的webbrowser控件中获得鼠标坐标

    如图这样,其实是要插入一个time的控件,这样才能使得坐标值会根据鼠标的移动而不停变化.time插件中写private void timer1_Tick(object sender, EventArg ...

  3. stl_alloc.h

    /* * Copyright (c) 1996-1997 * Silicon Graphics Computer Systems, Inc. * * Permission to use, copy, ...

  4. mac eclipse配置 tomcat

    mac由于各种软件不兼容,某些软件对于开发来说很苦恼,tomcat这个东西一直不知道怎么弄,项目都开了好几天了,一直用在虚拟机上用windows系统,但是用虚拟机明显感觉到电池待机时间更短了,所以就研 ...

  5. 进阶篇，第二章：MC与Forge的Event系统

    <基于1.8 Forge的Minecraft mod制作经验分享> 这一章其实才应该是第一章,矿物生成里面用到了Event的一些内容.如果你对之前矿物生成那一章的将算法插入ORE_GEN_ ...

  6. Ubuntu上glibc CVE-2015-7547漏洞的POC验证和修复

    Ubuntu上查看Glibc版本 $ldd --version ldd (Ubuntu GLIBC 2.21-0ubuntu4) 2.21 Ubuntu上查看使用Glibc的相关程序 sudo lso ...

  7. Activity对话框

    对话框Activity style 在style.xml中加入 <!--对话框风格--> <style name="dialog" parent="@a ...

  8. Android虚拟机GenyMotion-- 遇到的问题

    问题: android studio 检测不到 genymotion 原因:没有设置genymotion的adb,也就是sdk的路径. 解决方法:打开genymotion的主页面,设置sdk的位置为你 ...

  9. Android-adb相关

    最近做android开发遇到无法通过usb链接设备的情况,通过wifi连接设备调试也颇为方便 1.android 要root , 下载终端app  比如 BetterTerminal 2.通过以下命令 ...

  10. MySQL 序列使用

    MySQL 序列使用 MySQL序列是一组整数:1, 2, 3, ...,由于一张数据表只能有一个字段自增主键, 如果你想实现其他字段也实现自动增加,就可以使用MySQL序列来实现. 本章我们将介绍如 ...