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实现一个圆球的触壁反弹的更多相关文章

  1. 深夜,用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  2. html5 canvas 实现一个简单的叮当猫头部

    原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单的小案例.虽然在这一块几乎空白,但还是乐于尝试... ...

  3. 【canvas系列】用canvas实现一个colorpicker

    每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ** ...

  4. 【canvas系列】用canvas实现一个colorpicker(类似PS的颜色选择器)

    每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个colorpicker.今天canvas系列就用canvas做一个colorpicker. ** ...

  5. 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果

    继上一篇... 原生js实现一个DIV的碰撞反弹运动,并且添加重力效果 关键在于边界检测,以及乘以的系数问题,实现代码并不难,如下: <!DOCTYPE html> <html la ...

  6. 原生js实现一个DIV的碰撞反弹运动

     原生js实现一个DIV的碰撞反弹运动: 关键在于DIV的边界检测,进而改变运动方向,即可实现碰撞反弹效果. <!DOCTYPE html> <html lang="en& ...

  7. 使用canvas制作一个移动端画板

    概述 使用canvas做一个画板,代码里涵盖了一些canvas绘图的基本思想,各种工具的类也可以分别提出来用 详细 代码下载:http://www.demodashi.com/demo/10503.h ...

  8. 10分钟,利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  9. 用canvas实现一个colorpicker

    http://www.cnblogs.com/ufex/p/6382982.html 每个浏览器都有自己的特点,比如今天要做的colorpicker就是,一千个浏览器,一千个哈姆雷特,一千个color ...

随机推荐

  1. 在Java中调用C/C++本地库

    JNI是Java Native Interface的英文缩写, 中文翻译为本地调用, 自从Java 1.1开始就成为了Java标准的一部分. C/C++是系统级的编程语言, 可以用来开发任何和系统相关 ...

  2. (转载)Oracle 树操作(select…start with…connect by…prior)

    转载地址:https://www.cnblogs.com/linjiqin/p/3152674.html 备注:如有侵权,请立即联系删除. oracle树查询的最重要的就是select…start w ...

  3. HDMI驱动热插拔检测方法

    1. 使用poll机制 1.1 如何使用? a. open("/dev/HPD"); b. poll状态发生变化 c. read确定接上还是接下 1.2 情景分析: APP使用op ...

  4. tkinter学习系列之(八) Canvas控件

    目录 目录 前言 (一)carves创建方法 (二)carves的画图方法 目录 前言 由于最近想在tkinter里内嵌matplotlib,由于用到tkinter里的carves控件,先学习一下. ...

  5. Burp Suite 抓取http、https流量配置+CA证书安装

    HTTPS协议是为了数据传输安全的需要,在HTTP原有的基础上,加入了安全套接字层SSL协议,通过CA证书来验证服务器的身份,并对通信消息进行加密.基于HTTPS协议这些特性,我们在使用Burp Pr ...

  6. 使用if语句时应注意的问题(初学者)

    (1)在三种形式的if语句中,在if关键字之后均为表达式.该表达式通常是逻辑表达式或关系表达式,但也可以是其他表达式,如赋值表达式等,甚至也可以是一个变量. 例:if(a=5)语句: if(b)语句: ...

  7. 西安80投影坐标系转WGS84地理坐标系如何求七参数

    需求:西安80投影坐标系(平面坐标)转为WGS84地理坐标系(球面坐标) 这其中涉及的问题主要有以下两点: 1.一个是投影坐标系,一个是地理坐标系,而七参数指的是两个地理坐标系之间的转换,因此需要把投 ...

  8. 微软公布针对最新IE漏洞的安全通报2963983

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/MSSecurity/article/details/24637607  微软于昨天公布了一篇最新 ...

  9. Iris框架源码阅读和分析

    iris包结构简介 iris包含了很多包,下面这些是分析过程中接触到的东西. 能力有限,多多包涵,欢迎联系QQ:2922530320 一起交流 context包包含: Context (接口) con ...

  10. pku1365 Prime Land (数论,合数分解模板)

    题意:给你一个个数对a, b 表示ab这样的每个数相乘的一个数n,求n-1的质数因子并且每个指数因子k所对应的次数 h. 先把合数分解模板乖乖放上: ; ans != ; ++i) { ) { num ...