使用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.实现一个球类
class circle {
constructor() {
this.x = 25,
this.y = 25,
this.mx = Math.random()*5,
this.my = Math.random()*3,
this.radius = 25,
this.color = 'blue',
this.draw = function () {
ctx.beginPath();
ctx.arc(this.x,this.y,this.radius,0,Math.PI*2,true);
ctx.fillStyle = this.color;
ctx.fill();
}
} };
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);
})();
使用canvas实现一个圆球的触壁反弹的更多相关文章
- 深夜,用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
- html5 canvas 实现一个简单的叮当猫头部
原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单的小案例.虽然在这一块几乎空白,但还是乐于尝试... ...
- 【canvas系列】用canvas实现一个colorpicker
每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ** ...
- 【canvas系列】用canvas实现一个colorpicker(类似PS的颜色选择器)
每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ** ...
- 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果
继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...
- 原生js实现一个DIV的碰撞反弹运动
原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en& ...
- 使用canvas制作一个移动端画板
概述 使用canvas做一个画板,代码里涵盖了一些canvas绘图的基本思想,各种工具的类也可以分别提出来用 详细 代码下载:http://www.demodashi.com/demo/10503.h ...
- 10分钟,利用canvas画一个小的loading界面
首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...
- 用canvas实现一个colorpicker
http://www.cnblogs.com/ufex/p/6382982.html 每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个color ...
随机推荐
- [20171120]关于INBOUND_CONNECT_TIMEOUT设置.txt
[20171120]关于INBOUND_CONNECT_TIMEOUT设置.txt --//上午翻看以前我的发的帖子,发现链接:http://www.itpub.net/thread-2066758- ...
- excel中如何隐藏列和取消隐藏列
https://jingyan.baidu.com/article/148a192191dc9a4d71c3b11c.html excel如何隐藏列 1 先看下原表格是怎么样的. 2 隐藏列方法一:首 ...
- https证书概念
https://studygolang.com/articles/10776 http://www.360doc.com/content/15/0520/10/21412_471902987.shtm ...
- 搭建iSCSI文件服务器故障转移群集
故障转移群集(Failover Cluster)可以提供一个高可用性应用程序或服务的网络环境,本章将接受如何搭建iSCSI SAN文件服务器故障转移群集. 故障转移群集概述 我们可以将多台服务器组成一 ...
- 谈谈程序猿求职简历的STAR法则
最近Android/IOS的市场都有点躁动,前两天看业内几位大牛写的关于求职招聘的文章,觉得说的很有道理,暂且吸收进来,同时讲一下简历面试中使用STAR法则.我们在写简历或者面试时,最主要的一个目的, ...
- SVN与Git比较的优缺点差异
目录: SVN与Git比较(一)集中式vs分布式 SVN与Git比较(二)版本库与工作区 SVN与Git比较(三)全局版本号和全球版本号 SVN与Git比较(四)部分检出 SVN与Git比较(五)更新 ...
- eclipse版本和jdk对应关系
jdk最新版历史版本下载 http://www.oracle.com/technetwork/java/javase/downloads/index.html http://www.oracle.co ...
- tidb在DDL语句方面的测试
Mysql与tidb测试数据为8000万行. 1.修改一个字段的列名,比如将“ctime”修改为“cctime”. Tidb测试: MySQL测试: 2.同一属性之间切换,即修改一个字段的属性大小.比 ...
- java 三种循环及注意事项
package debug; public class Demo8 { public static void main(String[] args) { //采用for循环打印10次Java好 for ...
- 转 VMware虚拟机三种联网方式(图文详细解说)
原文地址https://blog.csdn.net/lucienduan/article/details/38233147 VMware三种网络模式联网 首先说一下VMware的几个虚拟设备 安装了V ...