-_-#【Canvas】回弹
<!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】回弹的更多相关文章
- HTML5 canvas入门
HTML5 Canvas入门 <canvas> 标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形.在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. ...
- js封装成插件-------Canvas统计图插件编写
之前就说过,我想写一个canvas画统计图的插件,现在写好了 先说下实现的功能吧: 1.可以通过自定义X轴坐标属性和Y轴坐标属性按比例画出统计图 2.可以选择画折现图还是柱形统计图,或者两者都实现 3 ...
- 移动端图表插件jChart.js的修改
bug1: 折线图,设置datasetGesture : true时,Y轴的刻度值居然会变.会变也就算了,居然没地方设置不能变. bug2: 折线图,设置tap.point事件,和datasetGes ...
- 【译】使用 Rust 和 WebAssembly 构建离线画图页面
原文地址:https://dev.to/sendilkumarn/create-dev-s-offline-page-with-rust-and-webassembly-21gn 原文仓库:https ...
- Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客
Canvas之动态波浪效果_陈在真Sunny_chen_新浪博客 Canvas之动态波浪效果 (2012-04-26 09:04:51) 转载▼
- 自定义控件之Canvas图形绘制基础练习-青春痘笑脸^_^
对于自定义控件的意义不言而喻,所以对它的深入研究是很有必要的,前些年写过几篇关于UI效果的学习过程,但是中途比较懒一直就停滞了,而对于实际工作还是面试来说系统深入的了解自定义控件那是很有必要的,所以接 ...
- -_-#【Canvas】FPS
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- -_-#【Canvas】转成黑白
function drawInBlackAndWhite() { var imagedata = context.getImageData(0, 0, canvas.width, canvas.hei ...
- -_-#【Canvas】measureText, translate, drawImage
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- uva 116 Unidirectional TSP （DP）
uva 116 Unidirectional TSP Background Problems that require minimum paths through some domain appear ...
- Shell 脚本模拟 milter 实现黑白名单及关键词过滤
程序执行流程:1. 开始接受邮件.2. 检查发件人是否在黑名单内,如果是拒绝接受;否则继续3. 检查发件人是否在白名单内,如果是接收邮件;否则继续4. 对邮件进行关键字过滤,如果邮件中包含被过滤的关键 ...
- Python之路,Day16 - Django 进阶
Python之路,Day16 - Django 进阶 本节内容 自定义template tags 中间件 CRSF 权限管理 分页 Django分页 https://docs.djangoproj ...
- 【开源java游戏框架libgdx专题】-11-核心库-演员类
演员类,又称为Actor类,是libgdx开发中最基本的元素,可以被继承. 演员类,从OpenGL类的角度来理解,可以称为一个二维场景节点.它本身具有位置(postion).边界矩形(类似Retang ...
- jquery获取元素到页面顶部距离
jquery获取元素到页面顶部距离的语句为: $(selector).offset().top
- (转)PHP中的ob_start用法详解
用PHP的ob_start();控制您的浏览器cache Output Control 函数可以让你自由控制脚本中数据的输出.它非常地有用,特别是对于:当你想在数据已经输出后,再输出文件头的情况.输出 ...
- 用DOM实现文章采集-HtmlAgilityPack实现html解析
Html Agility Pack 是CodePlex 上的一个开源项目.它提供了标准的DOM API 和XPath 支持! 下载地址:http://htmlagilitypack.codeplex. ...
- Listbox与dataGridView的获取鼠标点击事件的区别！！！
lisxian.SelectedIndex = index; Listbox获取鼠标的代码!!!! DataGridViewRow currenRow = this.dgvxian3.Rows[ind ...
- （转）C#Interface简介
接口:描述可属于任何类或结构的一组相关功能,通过interface关键字来声明:接口只包含方法.委托或事件和属性的签名(接口包含的成员).不能包含字段(因为字段是包含数据的).方法的实现是“继承”接口 ...
- 【USACO 1.3.2】修理牛棚
[描述] 在一个夜黑风高,下着暴风雨的夜晚,farmer John的牛棚的屋顶.门被吹飞了. 好在许多牛正在度假,所以牛棚没有住满. 牛棚一个紧挨着另一个被排成一行,牛就住在里面过夜. 有些牛棚里有牛 ...