德育处主任
德育处主任
技术前端
📚 本篇依然来自于我们的 《前端周刊》 项目!作者:德育处主任说起动图,你最先想到的是什么格式的图片?看过我前两年发布的文章的工友应该知道,我很喜欢用GIF做封面。文章对你有没有用不知道,但看到动图总能乐一乐。GIF流行了这么多年已经成为一种文化现象,我们斗图用的动态表情基本都是GIF。但在使用GIF做封面时我遇到一些问题。大多数平台对图片体积有限制,GIF体积通常很大。视频转成GIF后体积比视
1
0
0
0
技术JavaScript
点赞 + 关注 + 收藏 = 学会了 是 p5.js 中用于绘制3D 圆柱体的函数。圆柱体由顶部、底部两个圆形和侧面组成,所有表面由三角形拼接而成(这是 3D 绘图的常见方式)。注意: 只能在「WebGL 模式」下使用(WebGL 是浏览器的 3D 绘图技术),普通 2D 模式下无法生效。 的参数非常灵活,所有参数都是可选的,按顺序传入即可:radius(半径)作用:设置圆柱体底部 / 顶部圆形的
1
0
0
0
技术前端
📚 本篇依然来自于我们的 《前端周刊》 项目! 🧑‍💻 由团队成员 德育处主任 翻译,欢迎大家 进群 持续追踪全球最新前端资讯!! 📜 原文:The Power Of The Intl API: A Definitive Guide To Browser-Native Internationalization国际化可不只是翻译文本那么简单。它涉及到根据特定区域设置格式化日期、复数形式转换、
2
0
0
0
技术前端
作者:Chris Coyier 原文地址:Using the Custom Highlight API 翻译:0bipinnata0最近 CSS Custom Highlight API 引起了我的注意,因为 Firefox 最近开始支持它(Firefox 140,2025年6月),这使得所有主流浏览器都支持了这个 API。通过它,你可以对通过 JavaScript 中的 类获取的文本应用(某些
2
0
0
0
技术JavaScript
点赞 + 关注 + 收藏 = 学会了如果你已经会用、画简单 3D 形状,想组合它们做出复杂模型,又担心画面卡顿,那么就是你的 "性能救星"。这个函数能把多个简单形状 "焊接" 成一个自定义 3D 模型,让绘制效率飙升。是 p5.js 中用于组装复杂 3D 模型的工具函数。它的核心作用就像 "预制构件厂":把多个简单 3D 形状(比如、)组合成一个完整的对象(可以理解为 "自定义 3D 零件");这
9
0
0
0
技术JavaScript
点赞 + 关注 + 收藏 = 学会了如果你刚接触 p5.js,想尝试 3D 绘图,那么函数绝对是你的入门首选。它能快速绘制出 3D 长方体(或正方体),配合简单的交互就能做出酷炫的 3D 效果。本文会从基础到进阶,带你吃透这个实用 API。是 p5.js 中专门用于绘制 3D 立方体的函数。它具有以下几个特点:自带 6 个面,每个面都和相邻面成 90° 角(直角);必须在WebGL 模式下使用(3
10
1
0
0
AIPrompt
最近和一个工友吃饭,虽然他职位比我高一级,但他为人和善,能开玩笑,和部门的其他同事都处得挺好,大家都叫他「锁哥」。酒过三巡,我们开始聊起了公司近况,公司最近裁员一波又一波的,领导一边喊着拥抱AI一边降本。锁哥说,公司现在这状况,继续裁下去的概率还是很大的。现在AI一天比一天厉害,就算老板知道AI无法完全接手人类的工作,也会用AI来鞭笞我们。增不增效不知道,反正降本就挺明显的。现阶段我们要想想办法保
22
1
0
0
技术前端
点赞 + 关注 + 收藏 = 学会了作为前端新手,遇到页面样式错乱、交互异常时不用慌 —— 浏览器自带的「检查工具」就是你的 "透视眼",能帮你看穿网页的 "内心世界"。这篇教程带你从零开始,掌握最常用的调试技巧。几乎所有现代浏览器(Chrome、Edge、Firefox 等)都自带调试工具,打开方式大同小异:在网页任意位置右键点击,选择「检查」(或「检查元素」),直接打开工具面板。Windows
21
1
0
0
技术JavaScript
点赞 + 关注 + 收藏 = 学会了在 p5.js 的 3D 绘图中,这两个函数是一对 "黄金搭档"::像一个 "3D 模型的开关",调用它之后,你画的所有简单 3D 形状(比如球体、圆锥)都会被 "收集" 起来,组合成一个完整的模型。:关闭这个 "收集开关",并把收集到的所有形状打包成一个对象(可以理解为 "3D 模型的数据包"),最后用函数就能把这个模型画出来。为什么需要它们?想象你要画一个由
7
1
0
0
技术JavaScript
点赞 + 关注 + 收藏 = 学会了在 p5.js 中,是专门用来绘制 3D 模型的 "画笔"。它的作用很简单:把一个提前准备好的 3D 几何对象()画到画布上。但有个关键前提:必须在 WebGL 模式下使用。因为 3D 绘图需要 WebGL 的 3D 渲染能力,普通 2D 画布(默认模式)不支持!的参数必须是类型 —— 你可以把它理解为 "3D 模型的数字描述"(包含顶点、面、颜色等信息)。怎么
12
1
0
0
技术React
点赞 + 关注 + 收藏 = 学会了在 React 中,组件间通信是开发中最常见的场景之一。尤其是父组件和子组件之间,如何传值、如何响应事件,是理解组件化开发的第一步。本文从零讲起,逐个讲解 React 中的通信方式,包括:props 传递基本数据类型:这是最基本的通信方式,父组件通过 props 向子组件传递数据props 传递 JSX 元素:父组件可以将 JSX 元素作为 props 传递给子
10
1
0
0
技术Python
点赞 + 关注 + 收藏 = 学会了对于刚接触 opencv 的工友来说,能快速看到图像处理的效果是很重要的。OpenCV 内置了图像预览方法,我在之前的文章里已经介绍过。而在 Python 生态里,有一个更厉害的图像显示工具 —— MatplotlibOpenCV:这是一个专门用于图像处理和计算机视觉的开源库,它能方便地读取、处理各种图像。Matplotlib:这是 Python 的一个绘图库,
8
1
0
0
技术JavaScript
点赞 + 关注 + 收藏 = 学会了 如果你刚接触 p5.js,想画一个三角形,那 这个 API 就是你的好帮手! 是 p5.js 里专门用来画三角形的函数。只要你告诉它三个点的位置,它就能自动把这三个点连起来,形成一个三角形。画三角形的语法超级简单:这里的 6 个参数其实是三个点的坐标::第一个点的位置:第二个点的位置:第三个点的位置注意:p5.js 的坐标系里,左上角是原点 ,向右 x 变大
11
1
0
0
技术JavaScript
点赞 + 关注 + 收藏 = 学会了用 p5.js 绘制矩形有个很方便的方法:。这个简单的函数能帮我们画出普通矩形、圆角矩形,甚至在 3D 模式下调整细节。不过我们先从最基础的开始,一步步学会用它。 是 p5.js 里专门用来画矩形的函数。你可以用它画:四个角都是直角的普通矩形(比如书本、手机屏幕)四个角有弧度的圆角矩形(比如按钮、卡片)甚至在 3D 模式下画有分段细节的矩形(新手先不用管这个,后
9
1
0
0
技术JavaScript
点赞 + 关注 + 收藏 = 学会了如果你已经开始探索 p5.js 的 3D 世界,那么这个 API 绝对是你需要掌握的强大工具。它允许你创建自定义的 3D 几何模型,为你的创意提供无限可能。 用于从一个 OBJ 或 STL 格式的 字符串 中加载 3D 模型,并返回一个 对象。它适用于已经以文本形式(例如通过 读取文件后拼接的字符串)拿到模型数据的场景。为什么要用 ?当你想在运行时动态获取模
13
1
0
0
技术JavaScript
线段是最基础的图形元素,就像画画时的 “线条”—— 用它可以勾勒轮廓、连接形状,甚至组合出复杂的图案。p5.js 的 函数能轻松画出线段,语法比原生 Canvas 要好理解多了。 是 p5.js 中用于绘制线段的函数,作用就像用直尺在两点之间画一条直线。它是最基础的绘图工具之一,也是组合复杂图形的 “积木”—— 比如画正方形需要 4 条线段,画三角形需要 3 条线段。在 2D 模式下, 只需要
8
1
0
0
技术前端框架
点赞 + 关注 + 收藏 = 学会了 椭圆是圆形的 "灵活亲戚"—— 它可以是胖的、瘦的、横的、竖的,是创作中非常实用的图形元素。p5.js 的 函数能轻松绘制各种椭圆,这篇教程将带你从零基础掌握它的用法,并通过实例学会创意应用。 是 p5.js 专门用于绘制椭圆的函数。椭圆可以理解为 "被拉伸的圆",当它的宽度和高度相等时,就变成了正圆形(这也是为什么 其实是 的特殊形式)。在创作中,椭圆
10
1
0
0
技术React
点赞 + 关注 + 收藏 = 学会了在 React 开发中,我们经常需要给子组件传递多个属性(比如给一个博客卡片组件传递标题、作者、发布时间等)。如果逐个传递会显得繁琐,而 React 提供了简洁的语法来处理这种场景。本文就来详细讲解:如何高效传递多个属性,以及子组件如何优雅地接收这些属性。假设我们有一个展示博客文章的子组件,需要接收(标题)、(作者)、(日期)、(内容)4 个属性。我们来看看传递
73
1
0
0
技术JavaScript
点赞 + 关注 + 收藏 = 学会了在 p5.js 中, 函数用于绘制圆弧,它是创建各种圆形图形和动画的基础。圆弧本质上是椭圆的一部分,由中心点、宽度、高度、起始角度和结束角度等参数定义。通过灵活运用 函数可以轻松创建饼图、仪表盘、时钟等常见 UI 组件,以及各种创意图形效果。 函数的完整语法如下:核心参数解释:x, y:圆弧所在椭圆的中心点坐标w, h:椭圆的宽度和高度,如果两者相等,则绘制的
13
1
0
0
技术React
在 React 开发中,我们经常需要根据不同条件显示不同内容 —— 比如用户登录后显示个人中心,未登录时显示登录按钮;数据加载中显示 loading 状态,加载完成后显示内容。这种 "根据条件决定渲染什么" 的操作,就是条件渲染。本文将带你系统学习 React 中 7 种常用的条件渲染方式,从基础到进阶,每种方式都配有代码示例和适用场景分析。简单说,条件渲染就是根据特定条件(如变量值、状态、属性等
10
1
0
0