<!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. hdu 1882 Strange Billboard(位运算+枚举)

    http://acm.hdu.edu.cn/showproblem.php?pid=1882 感觉非常不错的一道题. 给一个n*m(1<=n,m<=16)的矩阵,每一个格子都有黑白两面,当 ...

  2. android bitmap的 一些简单操作

    /** 获取 drawable 的图片 可以循环 1.图名 2.drawable 3.包名 **/ int imgid = getResources().getIdentifier("ic_ ...

  3. python 学习笔记 copy

    浅copy >>> a=[1,2,3,[4,5,6]]>>> a[1, 2, 3, [4, 5, 6]]>>> a[3].append(7)> ...

  4. MYSQL 体系结构图-log (踏雪无痕) （UC技术博客)

    http://www.cnblogs.com/chenpingzhao/category/690116.html http://www.cnblogs.com/chenpingzhao/p/51074 ...

  5. Qt 学习之路：线程和事件循环

    前面一章我们简单介绍了如何使用QThread实现线程.现在我们开始详细介绍如何“正确”编写多线程程序.我们这里的大部分内容来自于Qt的一篇Wiki文档,有兴趣的童鞋可以去看原文. 在介绍在以前,我们要 ...

  6. 网络环境场景以及模拟工具netem

    网络环境场景包括: 延迟(Lag),把数据包缓存一段时间后再发出,这样能够模拟网络延迟的状况. 掉包(Drop),随机丢弃一些数据. 节流(Throttle),把一小段时间内的数据拦截下来后再在之后的 ...

  7. Android图片异步加载之Android-Universal-Image-Loader（转）

    今天要介绍的是Github上一个使用非常广泛的图片异步加载库Android-Universal-Image-Loader,该项目的功能十分强大,可以说是我见过的目前功能最全.性能最优的图片异步加载解决 ...

  8. Ubuntu知识记录

    1.激活root用户:sudo passwd root 2.安装ftp:apt-get install vsftpd,修改配置文件/etc/vsftpd.conf write_enable=yes表明 ...

  9. Centos7+Apache2.4+php5.6+mysql5.5搭建Lamp环境——为了wordPress

    最近想搭建个人博客玩玩,挑来挑去发现口碑不错的博客程序是wordpress,简称wp.虽然是学java路线的程序员,但因入行时间太短,至今没有发现较为称手开源的博客程序,如果各位大神有好的推荐,也希望 ...

  10. iOS中的设计模式

    一. MVC MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用一种业务逻辑.数据.界面显示分离 ...