canvas
文章平均质量分 58
Jouryjc
Slowly, more quickly.
展开
-
canvas动画之文字粒子效果
我们使用canvas来制作一个小的效果。这个小效果是我从codePen上看到的,我对其做了些修改增强,添加了一些新的功能。UI界面就如下图中看到的样子。我们要实现的效果就如我在图中操作的那样,在输入框中输入文字(不管中文,还是英文,还是各种表情也好)都可以在canvas画布中通过众多的粒子组成,在侧边栏中还有很多控件,它们可以控制粒子的各方面属性,以此来形成各种不同的绚丽效果。1.转载 2016-08-27 13:40:18 · 3284 阅读 · 0 评论 -
canvas分享之用户交互
用户交互也许是我们学习canvas动画中首先需要掌握的部分。毕竟,如果没有交互或者向动画中做一些动态的输入,那么这跟看电影有什么区别呢?用户交互基于事件,一般来说包括:鼠标事件,触摸事件和键盘事件。1. 事件和事件执行在理解事件之前,你需要明白什么是listener和handler。listener(即监听器)决定当一个事件发生时是否做出反应。handler(即执行者)是一个函转载 2016-08-29 23:17:37 · 695 阅读 · 0 评论 -
canvas动画效果之星球守护
代码文件如题,我取了个比较炫酷的名字——星球守护。其实呢,也就是一个简单的射击小游戏。作者并不是我,具体的效果可以去这里体验。我对代码做了部分修改与注释,并且添加了爆炸音效,和游戏结束音效。ok!接下来我们就来一步一步的介绍这个游戏完成过程。1.文件结构及静态资源介绍文件结构简单到令人发指--css //c转载 2016-08-31 18:27:35 · 3589 阅读 · 0 评论 -
canvas分享之三角函数(1)
这一节会分为两部分来讲,在第一部分主要讲下面这三个部分:三角函数!常用三角函数角度旋转(运用实例)在下一节主要讲解:波形运动圆周运动两点间的距离ok!现在开始我们的上部分,看到三角函数,勾股定理这样的数学名词是不是感到双腿打颤啊。好吧!就算你已经吓尿了,也不能否认我们初中学习的知识终于有了用武之地,挽起袖子,开整!!!转载 2016-08-25 14:35:19 · 2051 阅读 · 1 评论 -
canvas分享之三角函数(2)
在上一节我们介绍了canvas动画中有关三角函数的内容,以及一个跟随鼠标旋转的箭头动画。那么,在这一节呢!介绍的内容比较多,包括:波形运动圆周运动两点间的距离一.波形运动sin函数的波形想必骚年们不会感到陌生,如果只是考虑一个周期以内的函数波形,如下图所示:如果我们想要取到sin函数在[0, 2π]之间的值,非连续的情况下,可以这样估转载 2016-08-25 18:49:26 · 580 阅读 · 0 评论 -
canvas动画函数requestAnimationFrame
canvas原生动画函数requestAnimationFrame原创 2016-08-26 14:48:38 · 9436 阅读 · 1 评论 -
微信JS-SDK中getLocalImgData的坑
经常开发微信web需求的童鞋对微信jssdk肯定不会陌生。但是里面的坑未必都踩过,特此分享这篇填坑教程,与大家共勉。微信获取本地图片接口:wx.getLocalImgData({ localId: '', // 图片的localID success: function (res) { var localData = res.localData; // l原创 2017-10-19 21:06:37 · 23170 阅读 · 10 评论