river、的博客

记录自己

18、《每周一点canvas动画》——角度反弹

<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686"; --> 每周一点canvas动画代码文件 在上一节我们介绍了高级的坐标旋转方法,我们只需要知道物体的位置,通过设定每一...

2018-01-15 17:27:13

阅读数 210

评论数 1

17、《每周一点canvas动画》——星球守护

<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686"; --> 代码文件 在介绍完碰撞检测的内容后,总感觉不拿它做点什么事情有点虚啊!本章的内容应该在上周就更新完成,但是由于...

2018-01-15 17:26:22

阅读数 193

评论数 0

16、《每周一点canvas动画》——坐标旋转

<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686"; --> 每周一点canvas动画代码文件 在上一节中我们介绍了一些碰撞检测的方法。这一节本来打算讲解一个基于距离碰撞检...

2018-01-15 17:25:06

阅读数 321

评论数 0

15、《每周一点canvas动画》——碰撞检测(2)

<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686"; --> 每周一点canvas动画代码文件 如果你的画布上只有两个物体,那么他们之间的碰撞检测很容易就能实现。但是,当物...

2018-01-15 17:23:57

阅读数 171

评论数 0

14、《每周一点canvas动画》——碰撞检测(1)

<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686"; --> 每周一点canvas动画代码文件 在前面的几章中我介绍了一些动画效果,这些动画效果都相对基础。但是通过这些基础...

2018-01-15 17:22:53

阅读数 448

评论数 0

13、《每周一点canvas动画》—— 文字粒子

<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686"; --> 代码文件 每周一点canvas动画系列文章目前已经更新了12篇,今天给大家发个福利。我们使用canvas来制作...

2018-01-15 17:21:47

阅读数 141

评论数 1

11、《每周一点canvas动画》 —— 弹性动画

<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686"; --> 本系列文章代码文件 在上一章我们介绍了缓动动画,并且对弹性动画的概念做了简单的介绍。弹性动画(spring)与...

2018-01-15 17:20:02

阅读数 565

评论数 0

11、《每周一点canvas动画》——缓动动画

<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686"; --> 本系列文章代码文件 前面的章节我们介绍了许多基本的动画,在本节我们将使用这些基本的动画来创建一些高级动画。今天...

2018-01-15 17:19:07

阅读数 247

评论数 0

10、《每周一点canvas动画》——移动物体(2)

<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686"; --> 本系列文章代码文件 在上一节《每周一点canvas动画》——移动物体(1)中我们介绍了如何捕获一个物体,并且对...

2018-01-15 17:17:51

阅读数 332

评论数 0

8、《每周一点canvas动画》——边界检测与摩擦力(2)

到目前为止,我们最常见的两种情形: 物体按照一定的速度做任意运动直到碰上边界 物体自身,或者通过外部的作用力,运用加速度来改变物体的速度 不管怎样,除非我们主动设置物体在哪停住,或是撞击什么物体,否则物体就会以一定的速度朝着某个方向一直做运动。但是在现实...

2018-01-03 09:56:51

阅读数 303

评论数 0

9、《每周一点canvas动画》——移动物体(1)

<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686"; --> 本系列文章代码文件 在《每周一点canvas动画》——用户交互这一章我们介绍了用户交互事件,包括:鼠标事件,触...

2018-01-02 11:54:15

阅读数 276

评论数 0

7、《每周一点canvas动画》——边界检测与摩擦力(1)

本章已经是《Canvas 动画系列》动画的第七篇了,我保证这一章不会再有难的数学公式和物理概念。鉴于有的同学并不是从第一章开始看这个系列,我将会把本文所用到的一些 类文件 和 工具函数 文件放到文章的开头。关于前面每一章中的示例demo都可以在 canvas动画代...

2018-01-02 11:49:18

阅读数 644

评论数 0

6、每周一点canvas动画--加速度

在上一节中我们介绍了速度的基本概念,包括沿坐标轴的速度,和更普适的任意方向的速度,在文章的最后我们做了一个鼠标跟随的示例,以及通过改变物体的rotation属性做了一个关于速度的扩展。通过上一节的学习你会发现在速度的作用下物体可以沿着任意方向运动了。但这还远远不够,因为我们的物体都是在做匀速运动。...

2018-01-02 11:46:16

阅读数 269

评论数 0

5、每周一点canvas动画--速度

上一节中我们介绍了三角函数的应用,通过三角函数我们让小球实现了平滑运动,线性运动,圆周运动,脉冲运动等运动形式。这一节,我们介绍表征物体运动状态的另一个物理量——速度。1.速度与速率速度表征物体运动的快慢。在讲解速度与速率的概念之前,我们需要了解两个数学上的概念:矢量与标量标量:有大小而没有方向的...

2018-01-02 11:45:15

阅读数 806

评论数 1

4.1、每周一点canvas动画--圆周运动

圆周运动可以分为两种基本的形式:正圆运动和椭圆运动。在讲解圆周运动之前,必不可少的数学公式即将袭来。so,各位骚年们,请护好自己的膝盖。听不懂没关系,只要明白其中的原理就行。当然,能懂是最好的,这对后面学习高级动画是很有帮助的。好吧,废话少说直接上菜。 1.正圆运动一般情况下,圆的直角坐标方程可...

2018-01-02 11:42:23

阅读数 249

评论数 0

4.每周一点canvas动画--波形运动

在上一节我们介绍了canvas动画中有关三角函数的内容,以及一个跟随鼠标旋转的箭头动画。这一节主要介绍三角函数的波形运动。包括: 平滑运动 线性运动 脉冲运动 1.Sin函数的波形sin函数的波形想必骚年们不会感到陌生,其图形如下所示:如果想要取得sin函数在[0, 2π]之间的值,非连续的情况下...

2018-01-02 11:40:30

阅读数 515

评论数 0

3.每周一点canvas动画--三角函数

本节主要内容有: 三角函数介绍 常用三角函数解析 跟随鼠标角度旋转 看到三角函数,勾股定理这样的数学名词是不是有种双腿打颤的感觉啊!好吧,就算你已经吓尿了,也不能否认我们中学学习的知识终于有了用武之地,挽起袖子,开整!!! 1、三角函数什么是三角函数呢?简单的定义:所谓三...

2018-01-02 11:38:14

阅读数 199

评论数 0

2.每天一点canvas动画--用户交互

本系列文章均转自:我仍旧在这里(https://segmentfault.com/u/worengjiuzaizheli) 用户交互也许是我们学习canvas动画中首先需要掌握的部分。毕竟,如果没有交互或者向动画中做一些动态的输入,那么这跟看电影有什么区别呢?用户交互基于事件,一般来说...

2018-01-02 11:35:42

阅读数 294

评论数 0

1.每周一点canvas动画-序

本系列文章均转自:我仍旧在这里(https://segmentfault.com/u/worengjiuzaizheli) 《每周一点canvas动画》是一个系列文章,本文并不对canvas的API做过多的介绍,我默认你已经了解基本的canvas绘图API,并在此告诉你如何使用简单的数学与物...

2018-01-02 11:27:57

阅读数 253

评论数 2

canvas 简单入门

转自:xmt1139057136的专栏 HTML5 是一个新兴标准,它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性,它们都支持现行的 HTML 4.01 版本规范。它还引入了几个新元素和属性,它们...

2018-01-02 10:56:04

阅读数 174

评论数 0

提示
确定要删除当前文章?
取消 删除