本文首发于CSDN网站，下面的版本又经过进一步的修订。 关于 我的博客：louis blog SF专栏：路易斯前端深度课 原文链接：匠心打造canvas签名组件 CSDN链接：匠心打造canvas签名组件 - 极客头条 全文共4k+字，阅读需5分钟。 导读 6月又是项目吃紧的时候…

在 三年前端，面试思考 中提到了一个题目，非常有新意，这里分享一下当时面试的思考过程。 其实真正的答案是多少我并不清楚，面试过程中面试官也不期待一个准确的答案，而是看你的思考过程。 如果了解过 Canvas 且做过滤镜相关的工作，可能调用过 imageData = ctx.ge…

前言 大家好，我是林三心，相信大家看了我前一篇canvas入门文章为了让她10分钟入门canvas，我熬夜写了3个小项目和这篇文章，对canvas已经有了入门级的了解。今天，我又用canvas写了三个

这是我参与更文挑战的第8天，活动详情查看： 更文挑战 前言 我在上一篇文章简单实现了在canvas中移动矩形（点线面），不清楚的小伙伴请看我这篇文章：用canvas 实现矩形的移动（点、线、面）（1）

在搜索领域，早已出现了“查找相似图片/相似商品”的相关功能，如 Google 搜图，百度搜图，淘宝的拍照搜商品等。要实现类似的计算图片相似度的功能，除了使用听起来高大上的“人工智能”以外，其实通过 js 和几种简单的算法，也能八九不离十地实现类似的效果。 为了便于理解，每种算法…

数字图像处理（Digital Image Processing)是指用计算机进行的处理。说起数字图像处理大家都会想到C++有很多库和算法，MATLAB的方便，但自从有了canvas，JavaScript可以对图像进行像素级的操作，甚至还可以直接处理图像的二进制原始数据。 HTM…

图形学这个领域目前来看是很好玩也很有前景的一个方向，当我们了解它的基础知识，get到它好玩地方的时候，我们可以很轻松延伸到可视化这一领域进行拓展。本文会尽量以很通俗很详细的方式来向大家介绍，希望读者有所收获。 像这个由抛物线，阿基米德螺旋线以及星形线构成的图片，以及这颗随机树都…

项目地址中针对画板中的功能都单独做了抽离。如果想了解某个功能的话可以直接打开对应的文件查看效果。 直接给 canvas 元素设置 css 背景颜色。 使用 fill / fillRect 给画板填充颜色。 当我们使用在画板上使用 fillRect 之后，是无法再在通过 css …

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