<!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. ie11只能用管理员身份打开解决办法

    解决IE11只能用管理员身份运行的问题 不知道大家有没有遇到这种情况,在毫不知情的情况下 IE11 突然打不开了,必须要用管理员身份运行才可以打开,而且重置浏览器这个方法也不奏效. 今天本人也遇到了, ...

  2. 【PHP缩略图类】手机照片不能生成缩略图问题以及解决方式

    [本文原创,谢绝转载] 一.出现的问题 这几天做了手机上传照片并裁出缩略图的接口的測试,发现无论怎么.生成的缩略图都是一片漆黑.:-( 然后就把这个缩略图类单拿出来进行測试,发现仅仅要是手机拍出来的照 ...

  3. 第一篇：Power BI数据可视化概述

    前言 "可视化之工具,可爱者甚蕃.统计学家独爱R,自Python来,世人盛爱matplotlib.余独爱Power BI之出微软而不染(免费),濯Office而不妖(够精简).......& ...

  4. iOS中navigationItem的titleView如何居中

    开发过程中,发现titleview很难居中,通过各种尝试终于找到了解决方法. 首先清楚你个概念: leftBarButtonItem,导航条中左侧button. rightBarButtonItem, ...

  5. C#自定义事件：属性改变引发事件示例

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  6. JNI之本地线程进入c层

    在JNI开发中有时候会遇到在c层创建小线程的情况.从本质来讲,java线程和c线程都是请求kerner获取的,只是一段执行序列.从这个角度看,线程并没有什么不同,java线程和c线程可以通用. 然而在 ...

  7. php 时间戳 总结 今日，昨日，上周，本周，最近三个月，上季，本季，去年，最近七天，今年，最近三十天

    if($time=="今日"){ $beginToday=mktime(0,0,0,date('m'),date('d'),date('Y')); $endToday=mktime ...

  8. STL中的set容器

    #include <iostream> #include <set> using namespace std; int main() { set<int> s; s ...

  9. C++ 性能剖析 （三）：Heap Object对比 Stack (auto) Object

    通常认为,性能的改进是90 ~ 10 规则, 即10%的代码要对90%的性能问题负责.做过大型软件工程的程序员一般都知道这个概念. 然而对于软件工程师来说,有些性能问题是不可原谅的,无论它们属于10% ...

  10. 装饰者模式（Decorator）

    首先来看一个例子: 比如,饮料可以分为很多种类,而这里我取一个咖啡,那么这个咖啡呢,有多种形式的, 比如有加糖了的咖啡,有加奶的咖啡,也有加热了的咖啡,也有加了冰块的咖啡. 而各个顾客的选择却是不同的 ...