绘制小球

我们将会画一个小球用于动画学习,所以首先在画布上画一个球。下面的代码帮助我们建立画布。

<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小球动画的更多相关文章

  1. canvas小球动画原理

    随着html5发展,canvas标签作为h5革命性的发展标志也越来越流行.canvas标签的强大之处,不仅在于它可以作为一个独立的画布,也可以利用canvas做一些动画而不用导入flash文件.同时, ...

  2. canvas学习之小球动画

    项目地址:http://pan.baidu.com/s/1skZGPgL 最近学习使用canvas做动画效果,主要原理就是创建一个小球对象,然后小球对象有一个moveball方法,每次让小球沿着随机路 ...

  3. vue.js加入购物车小球动画

    生成一个动画小球的div,并且生成五个小球,五个是为了生成一定数量的小球来作为操作使用,按照小球动画的速度,一般来说五个也可以保证有足够的小球数量来运行动画 动画的内容分别是外层和内层,外层控制动画小 ...

  4. Expression Design与Blend制作滚动的小球动画教程

    原文:Expression Design与Blend制作滚动的小球动画教程 一,开发工具 Microsoft Expression Design & Blend 4.0 (3.0亦可). 这两 ...

  5. h5 canvas 小球移动

    h5 canvas 小球移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  6. 使用Canvas实现动画效果 | DKlogs -- 设计 | 生活

    使用Canvas实现动画效果 | DKlogs -- 设计 | 生活 使用Canvas实现动画效果

  7. Vue实现购物车小球动画

    思路: 1.因页面分组件分的比较细,由图可知是组件5到组件4的联动. 如果利用组件间通信需要 子组件5 -->组件3-->所有组件的父组件-->组件4, 层级略显复杂,所以使用了vu ...

  8. 使用vue模拟购物车小球动画

    使用vue模拟购物车小球动画 1.效果演示 2.相关代码 <!DOCTYPE html> <html lang="en"> <head> < ...

  9. canvas高级动画示例

    canvas高级动画示例 演示地址 https://qzruncode.github.io/example/index.html <!DOCTYPE html> <html lang ...

随机推荐

  1. Use Hexo to Build My Gitee Blog

      之前有自己建站托管自己的博客系统, 后来因为流量实在太少, 服务器又要每个月出钱, 然后就把她关了, 然是拥有自己的网站的心一直没有退去啊, 然后之前有接触到别人用GitHub托管静态网页的玩法, ...

  2. PyTorch 常用代码段整理

    基础配置 检查 PyTorch 版本 torch.__version__               # PyTorch version torch.version.cuda              ...

  3. java多线程中篇(一) —— Thread详情

    简介 简言之,现在的JDK线程模型基于操作系统原生线程,所以模型依赖于操作系统对线程的支持,另外Windows和Linux系统提供的线程模型就是一对一的 所以可以简单认为: 现在Java线程与操作系统 ...

  4. 解决Html页面缓存

    对于一个html页面,缓存分3部分,一个是页面内容,一个是css样式,一个是JS文件 CSS和JS文件缓存 <link rel="stylesheet" type=" ...

  5. 十分钟快速创建 Spring Cloud 项目

    一般来说,Intelij IDEA 可以通过 Maven Archetype 来快速生成Maven项目,其实 IDEA 集成了 Spring 官方提供的 Spring Initializr,可以非常方 ...

  6. k8s部署nacos

    如果是在centos7上直接启动nacos 注意修改启动命令   sh startup.sh -m standalone 访问路径 http://********:8848/nacos/index.h ...

  7. SVN_02安裝

    1.下载 TortoiseSVN  https://tortoisesvn.net/downloads.html 2.下载 VIsualSVN    https://www.visualsvn.com ...

  8. 使用MD5加密字符串

    一.概念: MD5码以512位分组来处理输入的信息,且每一分组又被划分为16个32位子分组,经过了一系列的处理后,算法的输出由四个32位分组组成,将这四个32位分组级联后将生成一个128位散列值. 二 ...

  9. zabbix4.2的yum+mariadb方式部署安装

    本文依据官方文档操作(英文4.2):https://www.zabbix.com/documentation/4.2/manual/installation/install_from_packages ...

  10. JAVA中为什么要使用接口,继承接口不是还要重写方法吗?为什么不直接写那些方法呢?:::接口的最主要的作用是达到统一访问

    接口的最主要的作用是达到统一访问 那么什么叫统一访问呢 举个例子 你这样想,我做一个USB接口,有个读的抽象方法 那叫read()吧,然后mp3类实现,U盘类实现,移动硬盘类实现,这样我用的时候用US ...