<!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. LayoutInflater和inflate()方法的使用方法

    public static LayoutInflaterfrom(Context context) { LayoutInflaterLayoutInflater = (LayoutInflater)c ...

  2. Spring 3 + Quartz 1.8.6 Scheduler Example--reference

    In this tutorial, we will show you how to integrate Spring with Quartz scheduler framework. Spring c ...

  3. [转] JAVA的Random类

    Random类 (java.util) Random类中实现的随机算法是伪随机,也就是有规则的随机.在进行随机时,随机算法的起源数字称为种子数(seed),在种子数的基础上进行一定的变换,从而产生需要 ...

  4. yii2 and short_open_tag

    在看yii2的时候, 在main文件里看到了这样一段代码 <?= Yii::$app->language ?> 而我查看了php.ini里的配置, short_open_tag=Of ...

  5. 使用MWC四轴起飞侧翻解决方法

    原因如下:1.电机顺序错了,如上图所示,上面蓝色的箭头是机头,绿色的箭头是电机转向,3.10.11.9对应MWC飞控版上的D3,D9,D11,D9,蓝色箭头对应MWC飞控板的箭头 或者传感器的Y轴 以 ...

  6. JS遍历对象或者数组

    一.纯js实现 <script> var obj = {"player_id":"GS001","event_id":" ...

  7. .Net程序员关于微信公众平台测试账户配置 项目总结

    今天项目第一次验收,夜晚吃过晚饭后,想把项目中用到的关于微信配置总结一下,虽然网上关于这方面的资料很多很多,还有官方API,但是总感觉缺点什么,就像期初做这个项目时,各方面找了很久的资料,说说配置吧! ...

  8. android中百度地图定位的实现方法（仅适用于真机+WIFI联网环境）

    注意:此代码的环境是:真机(系统版本为Android4.2.2)+WIFI联网(才能实现最后的运行结果):使用虚拟机调试会出现各种问题. 第一步:下载SDK和申请Key 到百度的网站http://de ...

  9. 四大跨平台的APP分析

    转载:http://blog.csdn.net/kenkao/article/details/50678269

  10. SVN的使用（转发）

    http://my.oschina.net/joanfen/blog/194491?fromerr=LM5QY3YF