【canvas】基于坐标的碰撞检测 / 基本的动画 / 多物体动画
<!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】基于坐标的碰撞检测 / 基本的动画 / 多物体动画的更多相关文章
- 10款基于HTML5+CSS3实现的超酷源码动画
1.基于Bootstrap的jQuery登录表单 这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮.这款登录表单有一个经过CSS3处理过的头像图 ...
- 基于坐标的自动化测试神器---Total Control快速入门
1.Total Control简单介绍 一款能够在PC上控制手机的软件,同时可以使用PC 触摸屏.鼠标.键盘, 全面操控 Android 手机,只需通过 USB 或 WiFi 连接手机至电脑,即可随时 ...
- 基于swiper的移动端H5页面,丰富的动画效果
概述 通过运用swiper插件,制作移动端上下整屏滑动的H5页面,用来宣传或者简单注册等,可以嵌套H5音乐或者视频. 详细 代码下载:http://www.demodashi.com/demo/119 ...
- 笔记-动画篇-layout动画初体验
约束动画的文章要比预计的迟迟来临,最大的原因是没有找到我认为的足够好的动画来讲解约束动画 —— 当然了,这并不是因为约束动画太难.相反,因为约束动画实在太简单了,反而没有足够多的简单动画素材让我选用. ...
- 【转】android动画之Tween动画 (渐变、缩放、位移、旋转)
原文:http://blog.csdn.net/feng88724/article/details/6318430 Android 平台提供了两类动画. 一类是Tween动画,就是对场景里的对象不断的 ...
- Android 动画基础——视图动画（View Animation）
本篇讲android 3.0之前被广泛的动画框架——ViewAnimation. 目录 我将分为六部分来讲: 概述 Alpha透明动画 Rotate旋转动画 Translate位移动画 Scale放缩 ...
- 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
- View动画和属性动画
在应用中, 动画效果提升用户体验, 主要分为View动画和属性动画. View动画变换场景图片效果, 效果包括平移(translate), 缩放(scale), 旋转(rotate), 透明(alph ...
- 背水一战 Windows 10 (15) - 动画: 缓动动画
[源码下载] 背水一战 Windows 10 (15) - 动画: 缓动动画 作者:webabcd 介绍背水一战 Windows 10 之 动画 缓动动画 - easing 示例演示缓动(easing ...
随机推荐
- C#一般处理程序获取Session
如果需要用ajax去动态校验验证码,如何获取Session保存的值呢? 你需要做两步: 一.在你的一般处理程序中添加命名空间 (using System.Web.SessionState;) 二.在你 ...
- mvc性能优化
mvc性能优化 (1)移动设备卡顿问题 -1请求方式 在mvc中GET请求有问题,出现错误 在MVC中在进行GET请求获取JSON数据时,需要进行如下设置: return Json("&qu ...
- myeclipse10 中修改html,servlet,jsp等的生成模板
1.进入myeclipse的安装目录 2.用减压软件,(如winrar)打开common\plugins\com.genuitec.eclipse.wizards_9.0.0.me2011080913 ...
- Object-C — KVO & oc通知
键值观察(KVO)是基于键值编码的一种技术. 利用键值观察可以注册成为一个对象的观察者,在该对象的某个属性变化时收到通知. 被观察对象需要编写符合KVC标准的存取方法,编写键值观察分为以下三步: (1 ...
- jQuery noConflict() 方法
如何在页面上同时使用 jQuery 和其他框架? jQuery 和其他 JavaScript 框架 正如您已经了解到的,jQuery 使用 $ 符号作为 jQuery 的简写. 如果其他 JavaSc ...
- JavaScript上下文和闭包
"this" 上下文 上下文通常是取决于一个函数如何被调用.当函数作为对象的方法被调用时,this 被设置为调用方法的对象: var object = { foo: functio ...
- 使用Eclipse把java文件打包成jar 含有第三方jar库的jar包
使用Eclipse把java文件打包成jar 含有第三方jar库的jar包 网上打包说用eclipse安装fat jar插件,但是貌似现在都不能用了,所以我只能按照eclipse自带的方法打包了. ...
- HDU2035 人见人爱A^B(快速幂)
描述: 求A^B的最后三位数表示的整数.说明:A^B的含义是“A的B次方”. 输入: 输入数据包含多个测试实例,每个实例占一行,由两个正整数A和B组成(1<=A,B<=10000),如果A ...
- 时区之痒 - 从手机GPS模块获取的时间，真的是北京时间么？
去年互联网地图行业开始引入众包模式,国内比较大的地图商,比如四维图新.高德地图.百度地图纷纷开始推出UGC应用,众包给用户采集门址.公交站等信息,并按照工作量给与采集者一定的回报.我曾经玩过某德推出的 ...
- Binary Tree Inorder Traversal 解题思路 ×
问题: 非递归中序遍历二叉树 思路: 1.大循环,判断节点是否为空,栈是否为空 2.不为空:点进栈,向左走 3.为空:为空,出栈,读取值,向右走