实现网易新闻的图中图（PIP）《二零一七年娱乐圈画传》，可以扫码在线预览，文章详细描述了计算的整个过程。

用 HTML5 的 Canvas 元素实现一个带有跳动效果的粒子动画。会用到 Canvas 的2D渲染上下文，通过 JavaScript 编写绘图代码，实现画布上一系列粒子的随机运动和相互作用。

今天我们要介绍的是一个基于Canvas的动态手电筒。这个手电筒可以通过鼠标的移动来模拟手电筒光圈，实现一个真实的手电筒体验。代码比较简单，让我们一起来看看如何实现。

本文介绍了如何用Canvas制作文字粒子动画。通过输入文字，程序可以将文字转换成粒子，并在画布上按照一定规律绘制出来。粒子具有一定的运动轨迹，形成独特的动感效果。

上一篇我们实现了文字、图片的命中检测与拖拽，这次我们来完成变形、旋转等功能，并将命中检测改为isPointInPath检测

本文正在参加「金石计划 . 瓜分6万现金大奖」 前言 😆 这是一篇踩在活动尾声的文章，主要是之前在摸鱼社群里有人发了个粒子动画的特效视频，想着研究研究写一篇文章出来看看，结果这一下子就研究了半个多月。

思路： 多个的色块（这里用圆）随机运动，并且大小也随着运动变化；每个色块半径放大后，看起来就有了流体效果；更改色块之间的混合模式，实现不同颜色的混合效果

你想入门canvas，宏观上对canvas的绘制流程有一个清晰的把握；你不是很清楚究竟`beginPath()`的作用以及何为“canvas是基于状态的绘图”——速来通关canvas

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！ 码上掘金 Demo 展示 代码片段 问题来了，绘制粒子时钟一共分几步？ 第一步，创建一个隐藏的文本canvas 因为需要绘制出表示时间的粒子