随着当今时期前端地愈来愈普及，页面实现的效果真的是越来越棒！ 随着数字图像处理、人工智能技术的发展 ，展示给用户的视觉效果便不局限于平面的2D视觉效果。

先上效果图，这个动画相信大家在很多地方见过。可能样式稍有不同，但大体一致。原作者不知是谁，看着还是挺炫酷的，话不多说，下面开始。 使用TypeScript开发（自己的ts练习项目）。live-server作为开发服务器，一切从简。 不会TS的同学也不用担心。ts代码很少。不影响…

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

这是一遍作为canvas入门的文章，可以作为以后canvas开发的参考手册，学完这些基础知识对于普通的网页动画、简单的数据可视化开发很有帮助。

这篇文章发布于2017年12月9日，星期六，22:20，归类于canvas相关。阅读67次,今日67次byzhangxinxufromhttp://www.zhangxinxu.com/wordpre

SVG 应用：使用 SVG 实现高性能阴影效果

相信大家平时在学习canvas 或 项目开发中使用canvas的时候应该都遇到过这样的需求：实现一个可以书写的画板小工具。 通过以上几个步骤我们就可以实现基本的画板功能了，然而事情并没那么简单，仔细的童鞋也许会发现一个很严重的问题——通过这种方式画出来的线条存在锯齿，不够平滑，…

今天学一下canvas像素点操作。 下面的栗子简单实现了几个简单的滤镜效果，具体算法参考的这里，学过《数字图像处理》的同学应该对此理解更深刻。 然后被朋友圈吐槽抠图。其实当时就是站在一块绿幕前拍的😂 。 PS中魔法棒工具可以把图片中一定容差下的相近像素都选中、清空，轻松做到一…

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