canvas小球动画
绘制小球
我们将会画一个小球用于动画学习,所以首先在画布上画一个球。下面的代码帮助我们建立画布。
<canvas id="></canvas>
跟平常一样,我们需要先画一个 context(画布场景)。为了画出这个球,我们又会创建一个包含一些相关属性以及 draw()
函数的 ball
对象,来完成绘制。
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var ball = { x: , y: , radius: , color: 'blue', draw: function() { ctx.beginPath(); ctx.arc(, Math.PI * , true); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); } }; ball.draw();
这里并没有什么特别的。小球实际上是一个简单的圆形,在arc()
函数的帮助下画出。
添加速率
现在我们有了一个小球,正准备添加一些基本动画,正如我们上一章所学的。又是这样,window.requestAnimationFrame()
再一次帮助我们控制动画。小球依旧依靠添加速率矢量进行移动。在每一帧里面,我们依旧用clear 清理掉之前帧里旧的圆形。
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var raf; var ball = { x: , y: , vx: , vy: , radius: , color: 'blue', draw: function() { ctx.beginPath(); ctx.arc(, Math.PI * , true); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); } }; function draw() { ctx.clearRect(,, canvas.width, canvas.height); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; raf = window.requestAnimationFrame(draw); } canvas.addEventListener('mouseover', function(e){ raf = window.requestAnimationFrame(draw); }); canvas.addEventListener('mouseout', function(e){ window.cancelAnimationFrame(raf); }); ball.draw();
边界
若没有任何的碰撞检测,我们的小球很快就会超出画布。我们需要检查小球的 x 和 y 位置是否已经超出画布的尺寸以及是否需要将速度矢量反转。为了这么做,我们把下面的检查代码添加进 draw
函数:
) { ball.vy = -ball.vy; } ) { ball.vx = -ball.vx; }
首个预览
让我们看看现今它变得如何。移动你的鼠标到画布里开启动画。
加速度
为了让动作更真实,你可以像这样处理速度,例如:
ball.vy *= .; ball.vy += .;
这会逐帧减少垂直方向的速度,所以小球最终将只会在地板上弹跳。
长尾效果
现在,我们使用的是 clearRect
函数帮我们清除前一帧动画。若用一个半透明的 fillRect
函数取代之,就可轻松制作长尾效果。
ctx.fillStyle = 'rgba(255,255,255,0.3)'; ctx.fillRect(,,canvas.width,canvas.height);
添加鼠标控制
为了更好地控制小球,我们可以用 mousemove
事件让它跟随鼠标活动。下面例子中,click 事件会释放小球然后让它重新跳起。
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var raf; var running = false; var ball = { x: , y: , vx: , vy: , radius: , color: 'blue', draw: function() { ctx.beginPath(); ctx.arc(, Math.PI * , true); ctx.closePath(); ctx.fillStyle = this.color; ctx.fill(); } }; function clear() { ctx.fillStyle = 'rgba(255,255,255,0.3)'; ctx.fillRect(,,canvas.width,canvas.height); } function draw() { clear(); ball.draw(); ball.x += ball.vx; ball.y += ball.vy; ) { ball.vy = -ball.vy; } ) { ball.vx = -ball.vx; } raf = window.requestAnimationFrame(draw); } canvas.addEventListener('mousemove', function(e){ if (!running) { clear(); ball.x = e.clientX; ball.y = e.clientY; ball.draw(); } }); canvas.addEventListener('click',function(e){ if (!running) { raf = window.requestAnimationFrame(draw); running = true; } }); canvas.addEventListener('mouseout', function(e){ window.cancelAnimationFrame(raf); running = false; }); ball.draw();
用你的鼠标移动小球,点击可以释放。
Breakout
本短文仅仅解释了一小部分的创建高级动画的技巧。其实还有更多!试试添加一个球拍,一些砖块,然后将这个例子弄成一个 Breakout(译者注:打砖块游戏) 如何?查看我们的游戏开发区去查阅更多相关文章。
以上内容来源网络,如有侵权,请联系删除蟹蟹٩('ω')و
canvas小球动画的更多相关文章
- canvas小球动画原理
随着html5发展,canvas标签作为h5革命性的发展标志也越来越流行.canvas标签的强大之处,不仅在于它可以作为一个独立的画布,也可以利用canvas做一些动画而不用导入flash文件.同时, ...
- canvas学习之小球动画
项目地址:http://pan.baidu.com/s/1skZGPgL 最近学习使用canvas做动画效果,主要原理就是创建一个小球对象,然后小球对象有一个moveball方法,每次让小球沿着随机路 ...
- vue.js加入购物车小球动画
生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画 动画的内容分别是外层和内层,外层控制动画小 ...
- Expression Design与Blend制作滚动的小球动画教程
原文:Expression Design与Blend制作滚动的小球动画教程 一,开发工具 Microsoft Expression Design & Blend 4.0 (3.0亦可). 这两 ...
- h5 canvas 小球移动
h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活
使用Canvas实现动画效果 | DKlogs -- 设计 | 生活 使用Canvas实现动画效果
- Vue实现购物车小球动画
思路: 1.因页面分组件分的比较细,由图可知是组件5到组件4的联动. 如果利用组件间通信需要 子组件5 -->组件3-->所有组件的父组件-->组件4, 层级略显复杂,所以使用了vu ...
- 使用vue模拟购物车小球动画
使用vue模拟购物车小球动画 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> < ...
- canvas高级动画示例
canvas高级动画示例 演示地址 https://qzruncode.github.io/example/index.html <!DOCTYPE html> <html lang ...
随机推荐
- Use Hexo to Build My Gitee Blog
之前有自己建站托管自己的博客系统, 后来因为流量实在太少, 服务器又要每个月出钱, 然后就把她关了, 然是拥有自己的网站的心一直没有退去啊, 然后之前有接触到别人用GitHub托管静态网页的玩法, ...
- PyTorch 常用代码段整理
基础配置 检查 PyTorch 版本 torch.__version__ # PyTorch version torch.version.cuda ...
- java多线程中篇(一) —— Thread详情
简介 简言之,现在的JDK线程模型基于操作系统原生线程,所以模型依赖于操作系统对线程的支持,另外Windows和Linux系统提供的线程模型就是一对一的 所以可以简单认为: 现在Java线程与操作系统 ...
- 解决Html页面缓存
对于一个html页面,缓存分3部分,一个是页面内容,一个是css样式,一个是JS文件 CSS和JS文件缓存 <link rel="stylesheet" type=" ...
- 十分钟快速创建 Spring Cloud 项目
一般来说,Intelij IDEA 可以通过 Maven Archetype 来快速生成Maven项目,其实 IDEA 集成了 Spring 官方提供的 Spring Initializr,可以非常方 ...
- k8s部署nacos
如果是在centos7上直接启动nacos 注意修改启动命令 sh startup.sh -m standalone 访问路径 http://********:8848/nacos/index.h ...
- SVN_02安裝
1.下载 TortoiseSVN https://tortoisesvn.net/downloads.html 2.下载 VIsualSVN https://www.visualsvn.com ...
- 使用MD5加密字符串
一.概念: MD5码以512位分组来处理输入的信息,且每一分组又被划分为16个32位子分组,经过了一系列的处理后,算法的输出由四个32位分组组成,将这四个32位分组级联后将生成一个128位散列值. 二 ...
- zabbix4.2的yum+mariadb方式部署安装
本文依据官方文档操作(英文4.2):https://www.zabbix.com/documentation/4.2/manual/installation/install_from_packages ...
- JAVA中为什么要使用接口,继承接口不是还要重写方法吗?为什么不直接写那些方法呢?:::接口的最主要的作用是达到统一访问
接口的最主要的作用是达到统一访问 那么什么叫统一访问呢 举个例子 你这样想,我做一个USB接口,有个读的抽象方法 那叫read()吧,然后mp3类实现,U盘类实现,移动硬盘类实现,这样我用的时候用US ...