使用canvas实现一个圆球的触壁反弹
时间:2022-05-04
本文章向大家介绍使用canvas实现一个圆球的触壁反弹,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
HTML
<canvas id="canvas" width="500" height="500" style="border: 1px solid #FF0000;"></canvas>
JS
1.获取上下文
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
2.实现一个球类
1 class circle {
2 constructor() {
3 this.x = 25,
4 this.y = 25,
5 this.mx = Math.random()*5,
6 this.my = Math.random()*3,
7 this.radius = 25,
8 this.color = 'blue',
9 this.draw = function () {
10 ctx.beginPath();
11 ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
12 ctx.fillStyle = this.color;
13 ctx.fill();
14 }
15 }
16
17 };
3.new一个球
let ball = new circle();
4.实现动画函数
const move = (function () {
// 清除画布
ctx.clearRect(0,0, canvas.width, canvas.height);
// 重新绘制圆
ball.draw();
// 移动圆
ball.x += ball.mx; // x坐标递增
ball.y += ball.my; // y坐标递增
// x轴坐标加移动的距离大于画布宽度(到达右边界) 或 x轴坐标加移动的距离等于0(到达左边界)
if (ball.x + ball.mx > canvas.width || ball.x + ball.mx < 0) {
ball.mx = -ball.mx; // x轴坐标递减
};
// y轴坐标加移动的距离大于画布宽度(到达下边界) 或 y轴坐标加移动的距离等于0(到达上边界)
if (ball.y + ball.my > canvas.height || ball.y + ball.my < 0) {
ball.my = -ball.my; // y轴坐标递减
};
// 递归调用当前方法
window.requestAnimationFrame(arguments.callee);
})();
- [程序设计语言]-[核心概念]-03:控制流
- 简单代码实现“网站维护中”“coming soon” 效果
- 使用Topshelf创建Windows 服务
- 自定义AuthorizeAttribute
- 系统进程管理工具Process Explorer
- jquery 操作DOM元素(1)
- 开源的读取Excel文件组件-ExcelDataReader
- BlackPearl 的 ServiceObject 开发部署
- [程序设计语言]-[核心概念]-04:数据类型
- jquery 筛选元素(1)
- [程序设计语言]-00:目录
- 使用 SQL Server 2008 数据类型-xml 字段类型参数进行数据的批量选取或删除数据
- jquery 筛选元素 (2)
- 专家:中国还不是网络强国 今后须打破国外垄断
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android ViewFlipper的详解及实例
- Android编程实现拍照功能的2种方法分析
- 在Ubuntu/Linux环境下使用MySQL开放/修改3306端口和开放访问权限
- 10大HBase常见运维工具整理小结
- Android实现扫一扫识别数字功能
- 通过SSH连接本地linux虚拟机的过程记录
- 实现Android 获取cache缓存的目录路径的方法
- Android 消息分发使用EventBus的实例详解
- 详解Android实现定时器的几种方法
- Android 实现带进度条的WebView的实例
- Android单元测试之对Activity的测试示例
- Android开发之手势检测及通过手势实现翻页功能的方法
- Android开发之CheckBox的简单使用与监听功能示例
- Android将图片上传到php服务器的实例代码
- Android图片识别应用详解