最近大家对这个表情 非常熟悉。 最近看到 张大大 《纯前端实现可传图可字幕台词定制的GIF表情生成器》 写的关于 前端做 GIF 的文章。由于最近也一直接触的视频，所以就干脆直接再进一步，以后直接通过一个库快速生成 gif 。 直接放参考 DEMO 效果 实现原理 其实相对而言，也是利用了一个核心库 gif.js, 它可以直接将传入 canvas 对象实现截图然后保存为最后 blob 对象。 var gif = new GIF({ workers: 2, quality: 10 }); // add an image element gif.addFrame(imageElement); // or a canvas element gif.addFrame(canvasElement, {delay: 200}); // or copy the pixels from a 详情 »
Recently we have released our new image tool daycaca. A pure JS library to handle image via canvas <Canvas> is a magic element which helps you to draw some amazing effects in a web page. And it enables a power to draw images on the canvas. drawImage helps us draw an image on canvas. 详情 »
随着 html5 canvas 的 api支持，我们现在可以轻松的对图片进行一些处理，比如图片的放大，缩小，图片的裁剪和旋转。因为它可以接触到像素级别的操作，进行更加复杂的操作。 绘制一张图片 在 canvas 中绘制一张图片 只需要利用到 drawImage 这个方法就可以实现。 ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); drawImage 它可以接受九个参数(不一定全部传入) image: 它可以是一个 图片的 Image 元素，或者 Video ，Canvas 元素。 dx 表示在画布 x 轴的坐标值 dy 表示在画布 y 轴的坐标值 dWidth 表示在画布绘制的长度 dHeight 表示在画布绘制的高度 sx 表示在画布所绘制图片本身的 x轴 详情 »
原文地址: http://codepen.io/Mamboleoo/post/tunnel-animation-1 @Louis Hoebregts 如果你对下面的效果非常好奇的话，那么今天这篇文章就是要告诉你们如何实现一个类 虫洞的特效动画。 同样我也在 agency’s 2017 使用了这样的效果。而我将在这篇文章中解释其中的原理和基本实现。 我们需要创建一个管道然后在里面会设置一个相机运动。然后我们会丰富我们这个管道的外在样子。 我们使用了 Three.js 来完成基本的动画，如果你对 Three.js 不怎么了解，你可以先阅读 Rachel Smith's posts 来了解一些基本知识。 建立场景 作者使用的codepen编辑，不过这里会补上欠缺的 首先我们加入一些基本 Three.js 代码来实现 一个基本的 Three.js Demo. 在 html 代码中添加 canvas <!DOCTYPE html> <html> < 详情 »
