背景 我们用手机的摄像头自拍，很容易实现 简单的自拍效果，如复古、黑白等等。其实我们使用web端的JavaScript也是可以实现的。接下来就带领小伙伴实现一个魔法摄像头。并且提供了截图下载功能...

前言 Hello，大家好！我是 Atrox?，一个正在努力学习的前端攻城狮 ?。在我的上一篇文章 svg 基础知识入门中，我向大家介绍了有关SVG的基础知识。 在HTML5之前，人们通常使用SVG来在页面上绘制出...

目标 也就是需求，是在画布上可以输入文字，可以选中文字再次编辑，图形的基本变换已经实现了，现在只要可以新增文本。二次编辑即可。 方案选择， 编辑文字使用dom文本框，失焦后，文字绘制到画...

1. 前言 最近我需要将网页的DOM输出为PDF文件，我使用的技术是html2Canvas和jsPDF。具体流程是，首先使用html2Canvas将DOM转化为图片，然后将图片添加到jsPDF中进行输出。 const pdf = new jsPD...

前言 学习目标 创建相机对象 平移视口 缩放视口 知识点 二维视图投影矩阵 前情回顾 之前我们canvas的矩阵变换原理，接下来我们就可以创建图形对象了，我们先写个相机练练手。 1-相机的功能分析 ...

先展示一下静态效果图 介绍一下我们的实现流程： 首先整个经验条有一个圆角边框的背景打底； 然后给经验条绘制一条轨道，让用户比较直观地看到总进度的长度； 在轨道的上层绘制我们的渐变色经验...

本文简介 点赞 + 关注 + 收藏 = 学会了 记得以前看爆笑校园里有一集讲到，一个人对着前面开了一枪，过了一阵子弹打中他自己的后脑勺。作者想通过这个冷笑话告诉大家一件事：地球是圆的。 在 Mat...

文章简介 之前在 《p5.js 光速入门》 里粗略讲过一下如何使用 p5.js 创建画布。 这次要介绍几个 p5.js 提供的画布相关的方法。 创建画布时的相关配置。 让画布绑定指定元素。 重置画布大小。 删...

哈喽大家好啊，我是广州小井。继上一章节了解 WebGL 颜色和纹理后，接着来学习图形的二维变换。从本文开始我们将逐步了解 WebGL 中的图形二维变换、动画的实现。文中附有大量实战案例在线演示，...

承上 在第一篇# 3D数字孪生 - Three.js 项目介绍与基础环境搭建（一）有介绍，在使用 three/filber 的Canvas组件时，默认情况下，会自动添加初始化一个透视相机（PerspectiveCamera），模拟了人...

leaferjs，全新的渲染引擎 1. 前言 前几天群里有人发了一个新 Canvas 渲染引擎的图片，看数据和宣传口号相当炸裂，号称只用 1.5s 可以渲染 100 万个矩形，还是个国产的。 出于个人兴趣，就花了...

魔法笔开发 文档创建人创建日期文档内容更新时间adsionli2023-07-27涂抹笔绘制2023-07-27上周在公司项目中了做了一个很有意思的东西，借助公司的aigc提供的能力，做了一个可以通过画布涂抹商品...

本文以canvas、svg原生为基础，结合fabricjs和antv框架讲解了2D图形原理。并深入分析了框架的构成原理，以及如何实现，并结合案例给出了多种实现方式。最后给出了整体架构图，方便参考。 canvas...

前言 最近略有时间(MoYu)，自己复刻了一下经典的点连线特效，写的时候发现有些初高中的函数知识，什么一次函数、圆形函数啥的，一下子搞得自己懵逼，问gpt也是答非所问，牛头不对马嘴，最后还是...

本文简介 点赞 + 关注 + 收藏 = 学会了 在 《p5.js 光速入门》 里我们学过加载图片元素，学过过背景色的用法，但当时没提到背景图要怎么使用。 本文就把背景图这部分内容补充完整，并且会提到在...

哈喽大家好啊，我是广州小井。经过上两个小节的学习，我们基本掌握了矩阵在 WebGL 中的应用，2D的图形变换实现也不在话下了。那么这一小节，我们接着以上学习的变换效果，来实战图形动画，让图...

前一篇分析了三个基础显示类 这一篇分析另外四个稍显高级的显示类 -- Sprite、Movieclip、DOMElement、BitmapText SpriteSheet SpriteSheet 比较简单 它继承自 EventDispatcher 所以 SpriteShee...

前言 学习目标 基于某一基点变换任意图形 知识点 矩阵变换 1-基点变换的思路 此时我突然想起一句让人午夜惊醒的话：来，咱们再把这件事情的来龙去脉从头捋一遍。 我现在就想着把这个基点变换的...

序言 人的一生就是进行尝试，尝试的越多，生活就越美好。——爱默生 在前一阶段的工作中，突然接到了这个需求：手写签批的页面在移动端竖屏时强制页面横屏展示进行签字，一开始我觉着只要将页面...