<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style type="text/css">

        canvas {

            border: 2px dotted #ddd

        }

    </style>

</head>

<body>

    <canvas id="canvas1" width="400" height="400"></canvas>

    <canvas id="canvas2" width="400" height="400"></canvas>

    <script>

        var canvas1 = document.getElementById('canvas1')

        var context1 = canvas1.getContext('2d')

        function randomFromTo(from, to) {

            return Math.floor(Math.random() * (to - from) + from)

        }

        function Circle(x, y, radius, color) {

            this.x = x

            this.y = y

            this.radius = radius

            this.color = color

            this.isSelected = false

        }

        var circles = []

        function addRandomCircle() {

            var radius = randomFromTo(10, 60)

            var x = randomFromTo(0, canvas1.width)

            var y = randomFromTo(0, canvas1.height)

            var colors = ['green', 'blue', 'red', 'yellow', 'magenta', 'orange', 'brown', 'purple', 'pink']

            var color = colors[randomFromTo(0, 8)]

            var circle = new Circle(x, y, radius, color)

            circles.push(circle)

        }

        function drawCircles() {

            context1.clearRect(0, 0, canvas1.width, canvas1.height)

            context1.globalAlpha = 0.85

            context1.strokeStyle = 'black'

            for (var i = 0, l = circles.length; i < l; i++) {

                var circle = circles[i]

                if (circle.isSelected) {

                    context1.lineWidth = 5

                } else {

                    context1.lineWidth = 1

                }

                context1.beginPath()

                context1.arc(circle.x, circle.y, circle.radius, 0, Math.PI*2)

                context1.fillStyle = circle.color

                context1.fill()

                context1.stroke()

            }

        }

        var previousSelectedCircle = null

        function canvasClick(e) {

            var clickX = e.pageX - canvas1.offsetLeft

            var clickY = e.pageY - canvas1.offsetTop

            for (var i = circles.length; i > 0; i--) {

                var circle = circles[i - 1]

                var distanceFromCenter = Math.sqrt(Math.pow(circle.x - clickX, 2) + Math.pow(circle.y - clickY, 2))

                if (distanceFromCenter <= circle.radius) {

                    if (previousSelectedCircle != null) {

                        previousSelectedCircle.isSelected = false

                    }

                    previousSelectedCircle = circle

                    circle.isSelected = true

                    drawCircles()

                    return

                }

            }

        }

        addRandomCircle()

        addRandomCircle()

        addRandomCircle()

        addRandomCircle()

        addRandomCircle()

        addRandomCircle()

        addRandomCircle()

        addRandomCircle()

        drawCircles()

        canvas1.onclick = canvasClick

        var canvas2 = document.getElementById('canvas2')

        var context2 = canvas2.getContext('2d')

        var squarePosition_y = 0

        var squarePosition_x = 10

        function drawFrame() {

            context2.clearRect(0, 0, canvas2.width, canvas2.height)

            context2.beginPath()

            context2.rect(squarePosition_x, squarePosition_y, 10, 10)

            context2.lineStyle = 'black'

            context2.lineWidth = 1

            context2.stroke()

            if (squarePosition_y > canvas2.height) {

                squarePosition_y = 0

            } else {

                squarePosition_y += 1

            }

            setTimeout('drawFrame()', 20)

        }

        setTimeout('drawFrame()', 20)

    </script>

</body>

</html>

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <canvas id="canvas" width="600" height="400" style="border:1px solid #ddd;"></canvas>

    <button id="add">Add Ball</button>

    <button id="clear">Clear Canvas</button>

    <input id="ballSize" type="number">

    <input id="connectedBalls" type="checkbox">

    Connect Balls

    <script>

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

            this.x = x

            this.y = y

            this.dx = dx

            this.dy = dy

            this.radius = radius

            this.color = 'red'

        }

        var balls = []

        function addBall() {

            var radius = parseFloat(document.getElementById('ballSize').value)

            var ball = new Ball(50, 50, 1, 1, radius)

            balls.push(ball)

        }

        function clearBall() {

            balls = []

        }

        document.getElementById('add').onclick = addBall

        document.getElementById('clear').onclick = clearBall

        var canvas = document.getElementById('canvas')

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

        setTimeout('drawFrame()', 20)

        function drawFrame() {

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

            context.beginPath()

            for (var i = 0; i < balls.length; i++) {

                var ball = balls[i]

                ball.x += ball.dx

                ball.y += ball.dy

                if (ball.y < canvas.height) ball.dy += 0.22

                ball.dx = ball.dx * 0.998

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

                    ball.dx = -ball.dx

                }

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

                    ball.dy = -ball.dy * 0.96

                }

                if (!document.getElementById('connectedBalls').checked) {

                    context.beginPath()

                    context.fillStyle = ball.color

                } else {

                    context.fillStyle = 'white'

                }

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

                context.lineWidth = 1

                context.fill()

                context.stroke()

            }

            setTimeout('drawFrame()', 20)

        }

    </script>

</body>

</html>

【canvas】基于坐标的碰撞检测 / 基本的动画 / 多物体动画的更多相关文章

  1. 10款基于HTML5+CSS3实现的超酷源码动画

    1.基于Bootstrap的jQuery登录表单 这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮.这款登录表单有一个经过CSS3处理过的头像图 ...

  2. 基于坐标的自动化测试神器---Total Control快速入门

    1.Total Control简单介绍 一款能够在PC上控制手机的软件,同时可以使用PC 触摸屏.鼠标.键盘, 全面操控 Android 手机,只需通过 USB 或 WiFi 连接手机至电脑,即可随时 ...

  3. 基于swiper的移动端H5页面,丰富的动画效果

    概述 通过运用swiper插件,制作移动端上下整屏滑动的H5页面,用来宣传或者简单注册等,可以嵌套H5音乐或者视频. 详细 代码下载:http://www.demodashi.com/demo/119 ...

  4. 笔记-动画篇-layout动画初体验

    约束动画的文章要比预计的迟迟来临,最大的原因是没有找到我认为的足够好的动画来讲解约束动画 —— 当然了,这并不是因为约束动画太难.相反,因为约束动画实在太简单了,反而没有足够多的简单动画素材让我选用. ...

  5. 【转】android动画之Tween动画 (渐变、缩放、位移、旋转)

    原文:http://blog.csdn.net/feng88724/article/details/6318430 Android 平台提供了两类动画. 一类是Tween动画,就是对场景里的对象不断的 ...

  6. Android 动画基础——视图动画（View Animation）

    本篇讲android 3.0之前被广泛的动画框架——ViewAnimation. 目录 我将分为六部分来讲: 概述 Alpha透明动画 Rotate旋转动画 Translate位移动画 Scale放缩 ...

  7. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

  8. View动画和属性动画

    在应用中, 动画效果提升用户体验, 主要分为View动画和属性动画. View动画变换场景图片效果, 效果包括平移(translate), 缩放(scale), 旋转(rotate), 透明(alph ...

  9. 背水一战 Windows 10 (15) - 动画: 缓动动画

    [源码下载] 背水一战 Windows 10 (15) - 动画: 缓动动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 缓动动画 - easing 示例演示缓动(easing ...

随机推荐

  1. quartz简单实现

    quartz介绍 在我们的项目中,经常会遇到某个任务需要在特定的时间点执行,这个时间点可能是每天的某分某秒,可能是一周的指定某个星期某个时间等:quartz就是实现这样一个复杂任务调度逻辑的框架. 官 ...

  2. LA 4329(树状数组)

    题目描述: N <tex2html_verbatim_mark>(3N20000) <tex2html_verbatim_mark>ping pong players live ...

  3. 反射+javacsv+scv文件构建资源获取

    1.反射之前已经写过,大家可以在http://www.cnblogs.com/myadmin/p/5282628.html中大概了解下.同时请大家指正. javacsv.jar:java中用来处理cs ...

  4. java 开发基础篇1环境安装--eclipse安装教程

    如何安装java环境 http://jingyan.baidu.com/article/a24b33cd59b58e19fe002bb9.html JDK download http://www.or ...

  5. 最新的 iOS 申请证书与发布流程（2016.12）

    今天刚好客户定制的APP需要上架,也提供了新的开发者账号,所以就顺带把申请证书与发布流程写一遍. 证书是什么? 上面这个就是我们申请好证书后,下载到本地的.cer文件,也就是常说的开发证书与发布证书的 ...

  6. 设置lable内容不上下居中

    转载自:http://dong-zsh.github.io/2015/10/14/%E8%AE%BE%E7%BD%AElable%E5%86%85%E5%AE%B9%E4%B8%8D%E4%B8%8A ...

  7. UITableView编写可以添加，删除，移动的物品栏（二）

    MyTableViewCell.h文件(自定义ViewCell)的内容: MyTableViewCell.m的内容

  8. 导出文本、表格、图像到PDF格式文件中（学习整理）

    1.测试例子: 需要导入的外部jar包: 相关API http://www.coderanch.com/how-to/javadoc/itext-2.1.7/com/lowagie/text/pack ...

  9. 学会怎样使用Jsp 内置标签、jstl标签库及自定义标签

    学习jsp不得不学习jsp标签,一般来说,对于一个jsp开发者,可以理解为jsp页面中出现的java代码越少,对jsp的掌握就越好,而替换掉java代码的重要方式就是使用jsp标签.  jsp标签的分 ...

  10. phpexcel的写出操作（生成excel表）

    /* thinkphp3.2 ThinkPHP/Library/Org/Util/ 放置位置 http://files.cnblogs.com/files/youligai/phpexcel.zip  ...