最近对 html5小游戏有点兴趣，因为我感觉将来这个东西或许是前端一个重要的应用场景，例如现在每到某些节假日，像支付宝、淘宝或者其他的一些 APP可能会给你推送通知，然后点进去就是一个小游戏，基本上点进去的人，只要不是太抵触，都会玩上一玩的，如果要是恰好 get到用户的 G点，…

我们知道，canvas动画实现依赖于画布的重绘,通过不停的清空画布，绘制画布就能实现基本的动画效果。一般使用clearRect方法清除指定矩形区域，来实现重绘。长尾效果是使用透明的填充色代替clearRect方法来实现的。 ，遮住了之前所画的内容所以和清除效果是一样的。 透明度…

界面写得丑，忘轻喷。。。 这样我们基本就完成了游戏的大概了。 然后我们就能实现下一关的操作，重新再绘制游戏网格，重新生成新的颜色和位置了。 通过这个小游戏，可以学习到，canvas点击事件的监听和实现，因为canvas只是一张画布是一个状态机，没法通过dom一样直接操作，但是通…

随着网络的发展，越来越多的网络平台应运而生。如何获得更多的流量，吸引更多的眼球已经成为网络平台生存、发展的必要条件。现在网络平台最常见的一种宣传方式就是人邀人。 我最近就接到一个需求，做一个海报页面，并且能保存到手机，方便用户分享给朋友，希望能够达到人邀人的效果。 问题来了：二…

之前在公司项目中实现了一个可配置的转盘抽奖，主要是用canvas进行绘制，写这篇文章是为了通过一个大家可能会感兴趣的点，来熟悉canvas的一些api，我自己也算是进行一些复习，当然文章不会像项目中实现的那样复杂，只是一个简易版本的，尽量做到通俗易懂，给感兴趣的你指引一条路（其…

关于canvas的入门知识，网上有很多成熟的资料，我就不多做介绍啦。 为了方便理解之后的弹跳运动，我们先看看如何在canvas里实现匀减速直线运动。 做过动画的人都知道，动画中经常会用到这个方法。它使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。回调的次数通常是每…

工作的时候收到了UI的设计图，有一个类似进度盘（话说我也不大清楚官方叫法是啥）的效果。。就想起了荒废了好久的canvas。确认过效果，就用canvas来玩一下吧。。 确认了需要绘制的部分起码有6块。 接下来我们可以让进度条动起来。 经过的路程，在这就是角度degree，因为是进…

首先，当我们知道要做粒子的效果的时候，我们要思考我们如何来实现，而且还要尽可能的面对我们亲爱的对象，于是便有了如下的思考。 这里我定义了时间与粒子生成的数量，还有一个粒子池。 光在世界中沿直线传播，你现在所能看到的月光是很久之前的月光，这就说明很久之前的月光一直在传播，同时也意…

这个动画看起来有点难，但其实要比想象中的简单。 它只是平移和旋转的简单合成，下面大体分析一下。 1. 鼠标位置 要跟随鼠标移动，首先就要获取鼠标的位置。 可以给画布绑定mousemove事件，这样拿到鼠标相对于页面的绝对位置（pageX，pageY），再减去画布自身的偏移量，就…