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. JMeter 脚本开发(五)

    一.JMeter 元件运行顺序 执行顺序逻辑如下: 1.配置元件(如果存在) 2.前置处理器(如果存在) 3.定时器(如果存在) 4.取样器(如果存在) 5.后置处理器(如果存在且取样器的结果不为空) ...

  2. mybatis 字段类型Data相

    在项目中查询时间段的sql语句(时间类型为datetime或date)(数据库中的时间类型): <if test="beginTime!=null and beginTime!=''& ...

  3. [PC]两个蓝牙耳机同时输出相同音源

    需求:和老婆一起玩双人同屏游戏(以撒的结合:抗生),但需要带上蓝牙耳机玩. 设备:2个蓝牙耳机.1个蓝牙接收器.1台Win10系统电脑. 通过关键字搜索出一个解决方案(Output audio to ...

  4. awk实战演示

    awk:报告生成器,格式化文本输出. 我们一般使用的awk命令其实就是gawk,在centos7系统下,awk是gawk的链接文件. 基本用法:gawk [options] 'program'  FI ...

  5. 机器C盘临时区

    系统的临时区里:C:\Documents and Settings\Administrator(用户名)\Local Settings\Temporary Internet Files 这是临时文件夹 ...

  6. 扑克牌游戏-华为OJ-C++实现

    /*扑克牌游戏大家应该都比較熟悉了.一副牌由54张组成,含3~A.2各4张,小王1张.大王1张.牌面从小到大用例如以下字符和字符串表示(当中.小写joker表示小王,大写JOKER表示大王): 3 4 ...

  7. CSS中background属性详解

    CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

  8. 离线安装Cloudera Manager 5和CDH5(最新版5.9.3) 完全教程(七)界面安装

    一.安装过程 1.1 登录 1.2 接受许可协议 1.3 选择免费版本 1.4 选择下一步 1.5 选择当前管理的主机 1.6 选择使用Parcel安装,选择CDH版本,点击继续 1.7 等待安装 此 ...

  9. blinker语音控制Arduino/esp8266开关灯-滑动条使用-文本框交互

    总链接:  https://www.arduino.cn/thread-78393-1-1.html 语音控制:https://doc.blinker.app/?file=005-App%E4%BD% ...

  10. 浅谈JEECG多数据源的使用

    首先,简单的介绍下什么是JEECG.JEECG(J2EECode Generation)是一款基于代码生成器的免费开源的快速开发平台,使用JEECG可以简单快速地开发出企业级的Web应用系统.JEEC ...