- 博客(20)
- 收藏
- 关注
RSS订阅转载 18、《每周一点canvas动画》——角度反弹
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686";-->每周一点canvas动画代码文件在上一节我们介绍了高级的坐标旋转方法，我们只需要知道物体的位置，通过设定每一帧需要旋转的角速度,通过公式newX = x*cos - y*sin;newY = y*cos + x*sin;就可以计算出做圆
2018-01-15 17:27:13
498
1
转载 17、《每周一点canvas动画》——星球守护
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686";-->代码文件在介绍完碰撞检测的内容后，总感觉不拿它做点什么事情有点虚啊！本章的内容应该在上周就更新完成，但是由于这几天实在比较忙。一直没空把这个小游戏的过程写出来，就一直拖到了现在。如题，我取了个比较炫酷的名字——星球守护。其实呢，也就是一个简单
2018-01-15 17:26:22
467
1
转载 16、《每周一点canvas动画》——坐标旋转
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686";-->每周一点canvas动画代码文件在上一节中我们介绍了一些碰撞检测的方法。这一节本来打算讲解一个基于距离碰撞检测的小游戏。但是，因为最近比较忙，一直没来的及把游戏的整个过程完整的写出来。所以，这一节我们继续介绍下一项新技术——坐标旋转，它可能相
2018-01-15 17:25:06
884
转载 15、《每周一点canvas动画》——碰撞检测(2)
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686";-->每周一点canvas动画代码文件如果你的画布上只有两个物体，那么他们之间的碰撞检测很容易就能实现。但是，当物体越来越多，你就需要一些必要的策略去检测物体之间的碰撞，不能漏掉任何的可能性，同时还要考虑性能问题，避免重复检测。上一节我们介绍了物
2018-01-15 17:23:57
604
转载 14、《每周一点canvas动画》——碰撞检测(1)
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686";-->每周一点canvas动画代码文件在前面的几章中我介绍了一些动画效果，这些动画效果都相对基础。但是通过这些基础的动画形式和概念，你可以设计出更复杂的动画。本章将介绍在动画中相对来说比较难的物理概念——碰撞检测，当然，我并不是说这个概念在理解上有
2018-01-15 17:22:53
922
转载 13、《每周一点canvas动画》—— 文字粒子
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686";-->代码文件每周一点canvas动画系列文章目前已经更新了12篇，今天给大家发个福利。我们使用canvas来制作一个小的效果。这个小效果是我从codePen上看到的，我对其做了些修改增强，添加了一些新的功能。UI界面就如下图中看到的样子。我们要实
2018-01-15 17:21:47
343
1
转载 11、《每周一点canvas动画》 —— 弹性动画
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686";-->本系列文章代码文件在上一章我们介绍了缓动动画，并且对弹性动画的概念做了简单的介绍。弹性动画(spring)与缓动动画都是基于距离的百分比动画，两者的不同之处在于，一个作用于速度(ease), 一个作用于加速度(spring)。弹性动画是动画中
2018-01-15 17:20:02
1103
转载 11、《每周一点canvas动画》——缓动动画
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686";-->本系列文章代码文件前面的章节我们介绍了许多基本的动画，在本节我们将使用这些基本的动画来创建一些高级动画。今天我们介绍的第一个高级动画叫做缓动动画(ease),也许在写css动画的时候已经接触过 ease 这个概念。但我们今天要介绍的是如何在c
2018-01-15 17:19:07
797
转载 10、《每周一点canvas动画》——移动物体(2)
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686";-->本系列文章代码文件在上一节《每周一点canvas动画》——移动物体(1)中我们介绍了如何捕获一个物体，并且对物体进行拖拽。首先，我们在小球的原型对象上添加了一个方法getBounds()，该方法的作用是返回一个对象，该对象内包含小球的坐标和长
2018-01-15 17:17:51
1153
1
转载 8、《每周一点canvas动画》——边界检测与摩擦力(2)
到目前为止，我们最常见的两种情形：物体按照一定的速度做任意运动直到碰上边界物体自身，或者通过外部的作用力，运用加速度来改变物体的速度不管怎样，除非我们主动设置物体在哪停住，或是撞击什么物体，否则物体就会以一定的速度朝着某个方向一直做运动。但是在现实世界中，这是不可能的，我们周围有太多的东西会阻碍一个物体的运动，比如空气阻力等，它会让物体的运动速度持...
2018-01-03 09:56:51
574
转载 9、《每周一点canvas动画》——移动物体(1)
<!-- /*580*90 创建于 2015-01-05*/ var cpro_id = "u1891686";-->本系列文章代码文件在《每周一点canvas动画》——用户交互这一章我们介绍了用户交互事件，包括：鼠标事件，触摸事件和键盘事件。但是，到目前为止，我们除了键盘事件，对于另外两个事件几乎没有做过任何相应的应用。那么，在这一章，我们将要学习如何让c
2018-01-02 11:54:15
918
转载 7、《每周一点canvas动画》——边界检测与摩擦力(1)
本章已经是《Canvas 动画系列》动画的第七篇了，我保证这一章不会再有难的数学公式和物理概念。鉴于有的同学并不是从第一章开始看这个系列，我将会把本文所用到的一些 类文件 和 工具函数 文件放到文章的开头。关于前面每一章中的示例demo都可以在 canvas动画代码文件 中找到。下面是前面章节中我们用到的类文件和工具函数文件，有兴趣的同学可去下载。 ...
2018-01-02 11:49:18
1442
转载 6、每周一点canvas动画--加速度
在上一节中我们介绍了速度的基本概念，包括沿坐标轴的速度，和更普适的任意方向的速度，在文章的最后我们做了一个鼠标跟随的示例，以及通过改变物体的rotation属性做了一个关于速度的扩展。通过上一节的学习你会发现在速度的作用下物体可以沿着任意方向运动了。但这还远远不够，因为我们的物体都是在做匀速运动。既然有匀速运动，当然就有变速运动喽！这一节我们介绍本章的另一个重要内容加速度。1.加速度基本概念以防有的
2018-01-02 11:46:16
1309
转载 5、每周一点canvas动画--速度
上一节中我们介绍了三角函数的应用，通过三角函数我们让小球实现了平滑运动，线性运动，圆周运动，脉冲运动等运动形式。这一节，我们介绍表征物体运动状态的另一个物理量——速度。1.速度与速率速度表征物体运动的快慢。在讲解速度与速率的概念之前，我们需要了解两个数学上的概念：矢量与标量标量：有大小而没有方向的物理量（速率，体积，温度）矢量：有大小也有方向的物理量（速度，动量，力）尽管我们平时很少区分速度和速率到
2018-01-02 11:45:15
2430
1
转载 4.1、每周一点canvas动画--圆周运动
圆周运动可以分为两种基本的形式：正圆运动和椭圆运动。在讲解圆周运动之前，必不可少的数学公式即将袭来。so,各位骚年们，请护好自己的膝盖。听不懂没关系，只要明白其中的原理就行。当然，能懂是最好的，这对后面学习高级动画是很有帮助的。好吧，废话少说直接上菜。 1.正圆运动一般情况下，圆的直角坐标方程可以表示为：x2+y2=R2，根据此公式可以得出圆在直角坐标中的轨迹。也许，你会说这样就可以通过改变x,y
2018-01-02 11:42:23
607
转载 4.每周一点canvas动画--波形运动
在上一节我们介绍了canvas动画中有关三角函数的内容，以及一个跟随鼠标旋转的箭头动画。这一节主要介绍三角函数的波形运动。包括：平滑运动线性运动脉冲运动1.Sin函数的波形sin函数的波形想必骚年们不会感到陌生，其图形如下所示：如果想要取得sin函数在[0, 2π]之间的值，非连续的情况下，可以这样估算。123for(var angle=0; angle<Math.PI*2; angle+=
2018-01-02 11:40:30
1482
转载 3.每周一点canvas动画--三角函数
本节主要内容有：三角函数介绍常用三角函数解析跟随鼠标角度旋转看到三角函数，勾股定理这样的数学名词是不是有种双腿打颤的感觉啊！好吧，就算你已经吓尿了，也不能否认我们中学学习的知识终于有了用武之地，挽起袖子，开整！！！1、三角函数什么是三角函数呢？简单的定义：所谓三角函数，在几何上来说就是夹角与边的关系！为了更直观的表示，也为了让忘记的同学回忆起来，这里我给个示意图...
2018-01-02 11:38:14
572
转载 2.每天一点canvas动画--用户交互
本系列文章均转自：我仍旧在这里（https://segmentfault.com/u/worengjiuzaizheli） 用户交互也许是我们学习canvas动画中首先需要掌握的部分。毕竟，如果没有交互或者向动画中做一些动态的输入，那么这跟看电影有什么区别呢？用户交互基于事件，一般来说包括：鼠标事件，触摸事件和键盘事件。 1、事件和事件执行在理解事件之前，你需要明白什么是listene
2018-01-02 11:35:42
669
转载 1.每周一点canvas动画-序
本系列文章均转自：我仍旧在这里（https://segmentfault.com/u/worengjiuzaizheli） 《每周一点canvas动画》是一个系列文章，本文并不对canvas的API做过多的介绍，我默认你已经了解基本的canvas绘图API，并在此告诉你如何使用简单的数学与物理知识创建相当酷炫的动画。一说到物理和数学知识各位骚年们是不是感觉蛋疼(原谅我说脏话了)，不过我要告诉你，
2018-01-02 11:27:57
603
2
转载 canvas 简单入门
转自：xmt1139057136的专栏HTML5 是一个新兴标准，它正在以越来越快的速度替代久经考验的 HTML4。HTML5 是一个 W3C “工作草案” — 意味着它仍然处于开发阶段 — 它包含丰富的元素和属性，它们都支持现行的 HTML 4.01 版本规范。它还引入了几个新元素和属性，它们适用许多使用 web 页面的领域 — 音频、视频、图形、数据存储、内容呈现，等等。本文主要关注图形方面的
2018-01-02 10:56:04
555
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人