本文简介 p5.js 作为一款艺术类的 canvas 库，对颜色方面的支持是挺下功夫的，比如本文要介绍的渐变方法。 lerpColor() 要实现渐变效果，可以使用 lerpColor() 方法。 lerpColor 的作用是混合两...

本文简介 在刚接触 p5.js 时我以为这只是一个艺术方向的 canvas 库，没想到它还支持视频文件和视频流的播放。 本文简单讲讲如何使用 P5.js 播放视频。 播放视频文件 p5.js 除了可以使用 video ...

1. 前言 作为7年老鸟安卓，我的学习方向并不是常见的crud，算法，FW等方向，看过我的一些文章的朋友应该会比较清楚，我的主要技术栈除了日常开发外，更倾向于UI方面。 在接触学习并实践了各种效...

前言 Leafer 是新开源的一个 2D 图形绘制库，目前已经有了 1.1k 的 Star 数，成长趋势非常不错，本篇不对 Leafer 过多介绍，不了解的同学可以直接阅读官网介绍，或者阅读我在之前写的 LeaferJS ...

Canvas 基础图形 直线图形 <canvas ref='cnv' width='200' height='150' style='border: 1px dashed gray'></canvas> 注： 本篇文章所有 JavaScript 都是用的 Vue3 的 setup 格式代...

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

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

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

动机 之前水过一篇文章，偏整活性质，被人评论太水，痛定思痛，深刻反思，打算好好介绍一下，虽然仍然是整活性质，但会把细节介绍的更清楚。 PS：文章内容有点多，只想看成果的话直接跳到文章末...

前言 前两天在写了Canvas实现数字雨和放大镜效果和Canvas实现苹果充电盒动效后，还想试一下更炫酷的效果，经过挑选感觉动态粒子文字效果不错，马上开始研究。 正文 还是先看看效果，其中有几个...

哈喽大家好啊，我是广州小井。从上两个小节我们已经掌握了立方体的绘制方式，并且我们可以通过一定的手段（旋转）来观察出我们绘制的是一个立方体而不是普通的矩形。那么在这其中，涉及到了一些...

2023-0801 原文链接 #Canvas 介绍 canvas：使用脚本 (通常为 JavaScript) 来绘制图形的 HTML 元素。 本人遍历了以下两份文档，学习完就相当于有了笔和纸，至于最后能画出什么，则需要在 canvas ...

开篇 在一些 toc 类面向个人用户的网站中，都会为用户提供自由选择上传头像功能。前端可以借助 canvas 和 Canvas API 实现图像绘制，并在此基础上进行 缩放、移动 调整头像位置。 类似于微软 Mi...

前言 Canvas学了就想用，前两天写了Canvas实现数字雨和放大镜效果，感觉还要再练练手，今天来实现一下苹果官网的充电盒动效。后面有完整代码。 正文 还是先看看最终的效果，实现的原理也很简单...

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

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

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

前言 之前在学习的时候没有了解过Canvas的使用，趁着有空来学习一下Canvas，顺便实现两个简单的效果，数字雨和放大镜效果。后面有完整代码。 正文 还是先来看看效果 数字雨 放大镜 数字雨 我认...