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

每周一点canvas动画代码文件在上一节我们介绍了高级的坐标旋转方法，我们只需要知道物体的位置，通过设定每一帧需要旋转的角速度通过公式newX = xcos - ysin;newY = ycos + xsin;就可以计算出做圆周运动时物体的下一个坐标位置。本节的内容与上一节的内容息息相关。所以，务必把上一节的内容弄懂了，再来看这一节你就不会那么吃力了。这也应该是本系列最难的

业界 2016年07月10日

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

代码文件在介绍完碰撞检测的内容后，总感觉不拿它做点什么事情有点虚啊！本章的内容应该在上周就更新完成，但是由于这几天实在比较忙。一直没空把这个小游戏的过程写出来，就一直拖到了现在。如题，我取了个比较炫酷的名字——星球守护。其实呢，也就是一个简单的射击小游戏。作者并不是我，具体的效果可以去这里体验。我对代码做了部分修改与注释，并且添加了爆炸音效，和游戏结束音效。ok!接下来我们

业界 2016年07月08日

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

代码文件每周一点canvas动画系列文章目前已经更新了12篇，今天给大家发个福利。我们使用canvas来制作一个小的效果。这个小效果是我从codePen上看到的，我对其做了些修改增强，添加了一些新的功能。UI界面就如下图中看到的样子。我们要实现的效果就如我在图中操作的那样，在输入框中输入文字（不管中文，还是英文，还是各种表情也好）都可以在canvas画布中通过众多的粒子组成

业界 2016年07月06日

页面动画知识点整理

平时工作中会遇到需要实现一些存在动画的页面。这里对动画的实现知识做一个整理。页面动画的实现可以分为两类：CSS动画、Canvas动画、JavaScript动画。JavaScript动画没啥好讲的，这里就不整理了。CSS动画CSS3中提供了一个属性transition，用来实现CSS样式的平滑变化。举个例子:.box {width: 100px;height: 100px;b

业界 2016年07月06日

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

本系列文章代码文件在上一章我们介绍了缓动动画，并且对弹性动画的概念做了简单的介绍。弹性动画(spring)与缓动动画都是基于距离的百分比动画，两者的不同之处在于，一个作用于速度(ease), 一个作用于加速度(spring)。弹性动画是动画中相当有用的的一个物理概念，通过它你可以做很多酷炫的效果，本节的主要内容如下：简单的弹性动画鼠标跟随弹性动画offset spring总

业界 2016年07月06日

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

本系列文章代码文件前面的章节我们介绍了许多基本的动画，在本节我们将使用这些基本的动画来创建一些高级动画。今天我们介绍的第一个高级动画叫做缓动动画(ease),也许在写css动画的时候已经接触过 ease 这个概念。但我们今天要介绍的是如何在canvas中实现这样的动画效果。本章主要内容：百分比运动的概念定点缓动动画非定点缓动动画只能用在运动中吗1.百分比运动百分比运动的概念

业界 2016年07月06日

epto.cutphoto 头像裁剪小工具

这几天在做移动端的事情，其中有一个涉及到上传头像，这个功能模型简直不要太常见了，几乎所有的网站都到有这个功能，所以避免重复造轮子，直接参考大家的方案，封装了这个小东西，还有很多待遇完善的地方，后期也肯定会继续优化，现在就先这样子吧。首先它是基于 zepto 的（jquery 同样能用）。其次它其实就是借助 canvas 的一些属性做了一些小改动。压缩过后 8kb 大小。第一

业界 2016年07月05日

html5之canvas

canvas是html5出现的新标签，主要用来画图，看见网上能用来实现各种图形，所以感觉很好玩，就学习了一下。 canvas绘制图形有两种方法：context.fill() //填充context.stroke() //绘制边框在绘制图形前要设置好图形样式，也有两种方法：context.fillStyle()

业界 2016年07月05日

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

本系列文章代码文件在上一节《每周一点canvas动画》——移动物体(1)中我们介绍了如何捕获一个物体，并且对物体进行拖拽。首先，我们在小球的原型对象上添加了一个方法getBounds()，该方法的作用是返回一个对象，该对象内包含小球的坐标和长宽属性值，并且在我们的工具函数utils.js中也添加了一个方法containPoints(rect, x, y),该方法传入3个参数

业界 2016年07月04日