这是今年三月份帮学长做的一个项目，陪我度过了两个月的春招生活，整个项目做下来也是学到了很多东西，下面就开始我的分享啦，包括一些知识点总结和遇到的坑，dalao莫笑哈。 主要功能如上图，左边是图形工具栏，右边是canvas，上面是清除、删除、旋转、切换格子背景、保存并下载图片的操…

最近工作中需要制作一个图片预览的插件，在参考了很多产品（掘金、知乎、简书、石墨等）的图片预览之后，最终还是觉得石墨的比较符合我们的产品需求。 本来以为能在社区中找到相关插件，但想法美好，现实却很骨感，于是便决定自己手撸一个，顺便也学习一下组件的开发流程。 项目最终的实现效果如下…

如果有什么疑问或者使用中的其他问题可以在评论中讨论一下。

PixiJS是一个轻量级的2D渲染引擎，它能自动侦测使用WebGL还是Canvas来创建图形。这个库经常被用来制作HTML5游戏以及有复杂交互的H5活动页。 页面上就出现了一个300*300的蓝色矩形，矩形是由pixi.js创建的canvas渲染的。 Application是p…

本文是基于canvas去实现图片裁剪工具。因为canvas代码还是比较长的，尽量写思路，完整代码已放在github上。 这个是写canvas必定接触的问题，网上关于这个的答案也到处都是，就不详细介绍了。 因为canvas不是矢量图，在Retina屏下，浏览器用多个像素点去渲染一…

实现一个 canvas 拖拽、缩放、旋转的效果，如下效果图。 统一使用 typescript 来编写，在面对状态操作复杂的流程， ts 提供了状态标注，类型提示等。便于我们维护和梳理流程思路。比如类型标注提供了类似注释的功能，将对象描述清楚的同时，在我们使用相关属性或方法都会有…

应用展示截图在线预览需求既然是小应用，那就希望最终成品是有适用的场景且是有价值的需求来源这个应用需求的灵感在以前工作生活中，经常会无意中获得同事的美照这时我们想要把这张照片做成表情包一般给图片添加几个

说完，笔者朝你丢了张它的静态图，我的未来计划是实现它... 文本涉及的技术栈 Vue3、TypeScript、Canvas ... Emmm，身为强迫症，我个人对这个小游戏并不满意，代码和动画，各个方面不想列举，所以发出来和大家一起探讨一下。没什么别的原因，主要是掘金这里个个是…