如果我们用Canvas实现了一些动画效果，需要将它回放出来，很多人通常就是用录屏工具将屏幕内容录下来播放，很少有人知道，Canvas可以直接通过现代浏览器支持的 Media Streams API 来转成视频。 Canvas对象支持captureStream方法，这个方法会返回…

最早知道 canvas 的 globalCompositeOperation 属性，是在需要实现一个刮刮卡效果的时候，当时也就是网上找到刮刮卡的效果赶紧完成任务就完了，这次又学习一次，希望能加深理解吧。 先来看下 canvas 的 globalCompositeOperatio…

这一篇文章就是这个目的。目前国内主流成熟的H5游戏引擎有两个，分别是Laya和Egret，其中白鹭（Egret）发布时间较早，发展到现在已经很成熟，有相当多的商业游戏案例。Laya是后来崛起的H5游戏引擎，号称性能速度最快，也有了很多商业游戏案例。实际上关于两者对比的文章互联网…

学习canvas，首先得知道如何去绘制线段，然后才能通过很多简单的线段去实现比较复杂的图形，比如常见的图表，柱状图，折线图等都是通过一段一段的线段实现的。 canvas 的基础知识不算多，主要掌握如何绘制线段，图形，图片，文本等。canvas可以在浏览器中绘制，也可以借助 no…

半年前用js和canvas仿了热血传奇网游（地址），基本功能写完之后，剩下的都是堆数据、堆时间才能完成的任务了，没什么新鲜感，因此进度极慢。这次看到微信《弹一弹》比较火，因为涉及到物理引擎（为了真实），于是动手试了一下。一共用了10个小时，不仅完成了这个demo，<删除线>并且…

当初在掘金看到那个小熊的登录页面，很多人都很喜欢，于是恬不知耻的说了一句要用canvas来实现一遍，真的是给自己立了个flag,还好结果很糟糕。 为什么小熊会跟着输入框的输入而移动。 通过输入向量与角度值，来进行计算，生成坐标在空间旋转后的坐标，此处使用的计算公式为旋转矩阵，矩…

在 Web 前端开发中实现动画有2种方式。要么依靠 CSS 实现动画，要么依靠 JS 控制实现动画。 分析：给 div 添加了一个过渡动画，动画指定了 transform 动画，触发时机为当鼠标移上去的时候。因此当鼠标移入的时候元素的 transform 属性发生变化，那么这个…

简介：WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0（OpenGL for Embedded Systems，OpenGL嵌入式版本，针对手机、游戏机等设备相对较轻量级的版本）…

我是个很懒的人，开发过程中经常有意无意地刻意避开数学相关的知识，你也知道解数学题非常枯燥无趣。平时写动画也尽量使用 css3 来实现，timer-function 随意选用，最多也就调一下 cubic-bezier，找到看着舒服的就行。但是怎样让动画更顺滑，写出更贴近自然的动画…