假设我们现在在canvas上画了很多个节点(DisplayObject)，这些节点形成了一套层级关系，我们将鼠标移动到canvas元素上并点击了一下左键，这个时候，如何判断鼠标点到了哪个节点呢....

虽然平时很少关注性能方面的优化，但是在 cavnas 中是 hin 容易写出卡顿、甚至崩溃的代码的，所以讲一下大体思路还是很有必要的。当然天下乌鸦一般黑，道理都是一样的🥳。

最近我给图形编辑器增加了参照线吸附功能，讲讲我的实现思路。 效果是被移动的图形会参考周围图形，自动与它们进行吸附对齐。 不得不说，很酷炫。 感觉这个图形编辑器突然变得灵动起来，有了灵魂一般。 为什么需

用 Three.js Shader 粒子系统手撸一个超级漂亮的星系效果！学习如何在球体和圆盘上设置顶点、如何插值颜色、让粒子运动起来等等！

在制作Canvas游戏时，碰撞检测是非常重要的一环。我之前写过好几篇关于用canvas来实现游戏的文章，其中用到了很多碰撞检测，例如植物大战僵尸里发射的子弹和僵尸的碰撞检测，警察抓小偷的碰撞检测等。

继续给大家介绍下 Shader 是什么、能做什么、在哪里有用到，并且为后续古柳开始写 Three.js Shader 做个引子！

DisplayObject 是PIXI引擎核心类。了解 DisplayObject类 对学习PIXI非常重要，通过它可以了解如何移动、缩放、旋转和组合元素。

建议结合源码一起阅读，效果更好（这个 DEMO 使用的是 Vue 技术栈）。 1. 编辑器 先来看一下页面的整体结构。 这一节要讲的编辑器其实就是中间的画布。它的作用是：当从左边组件列表拖拽出一个组件放到画布中时，画布要把这个组件渲染出来。 用一个数组 componentDat…

要用Pixi.js实现一个可视化编辑器，需要先了解Pixi.js的基本概念和操作。Pixi.js是一个用于创建2D图形的JavaScript库，它可以高效地利用WebGL进行渲染。接下来，我将为您介绍