-_-#【Canvas】回弹
2014-12-29 15:55
127 查看
<!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>
相关文章推荐
- HTM5 Canvas 会回弹的球
- 初学canvas,遇到width和height显示问题和用excanvas.js兼容IE问题
- 利用canvas绘制一个简单时钟
- 小贝_html5 canvas绘制线条曲线
- Android 在Canvas中实现画笔效果(一)--钢笔
- WPF编程学习——布局 StackPanel、WrapPanel、DockPanel、Canvas、Grid
- 面向对象canvas_进度条-Konva.js
- HTML5标签canvas制作动画
- WindowBuilder入门:使用swt的canvas类构造显示URL图像
- Silverlight开发历程—(布局控件-Canvas)
- IE下及标准浏览器下的图片旋转(二)—— Canvas(1)
- 等待页面动态效果图(仿)(canvas)
- [转]html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
- canvas实现折线图
- canvas的translate、scale、rotate等方法
- 【HTML5】Canvas 内部元素添加事件处理
- android canvas 操作 test
- Canvas与Image互相转换示例以及利用该技术实现微信长按自动识别二维码功能
- 用canvas和原生JS写的一个flappy bird游戏