只要我成为一个废物，就没人能够利用我！ <br> 雷猴啊，我是一只临期程序猿。打过几年工，写过几行代码。但今天我不想聊代码，我们聊聊学习这件事。 <br> 技术年年更新，尤其是前端框架，很多时候觉得学习速度都要跟不上框架的更新速度了。 而且还不能不学，不学就跟不上，甚至连面试机会都没有。 即使一直在一家公司苟着，如果只是靠勤奋工作，不提升自己的技能，也很难晋升。 比如
精力管理就好比是计算机的内存清理，你以为关掉一些程序就行了，结果你还是卡成翔。 我的现状 雷猴啊，我是一个临期程序员。打过几年工，被好几个同事问过我为什么精力这么旺盛。 这两年我大多数情况都是早上8点前就到公司*（原本9点上班，后来调成8点半，晚上要是加班就可以多赚半小时了）*，属于工贼类型。 晚上回到家还有精力打游戏、看书、学习。 <br> <br> 为什么要提升
本文简介 本文介绍 Three.js 的基础方法：监听材质加载。 在 《Three.js 基础纹理贴图》 里介绍了如何给图形贴图，贴图前需要先把纹理加载好。我们基于这篇文章继续讲解如何监听材质加载成功或者失败。 <br> <br> 监听单个材质 我们使用 TextureLoader 的 load() 方法加载纹理时，第一个参数传入纹理的路径，之后还可以多接受3个函数类型的参
本文简介 p5.js 作为一款艺术类的 canvas 库，对颜色方面的支持是挺下功夫的，比如本文要介绍的渐变方法。 <br> lerpColor() 要实现渐变效果，可以使用 lerpColor() 方法。 lerpColor 的作用是混合两个颜色以找到一个介于它们之间的颜色。 语法是这样的： lerpColor(c1, c2, amt) c1: 开始颜色 c2: 结束颜色 amt
本文简介 在刚接触 p5.js 时我以为这只是一个艺术方向的 canvas 库，没想到它还支持视频文件和视频流的播放。 本文简单讲讲如何使用 P5.js 播放视频。 <br> <br> 播放视频文件 p5.js 除了可以使用 video 元素播放视频外，还支持使用 image 控件播放视频。 <br> 方式1：video元素播放视频 基础用法 p5.js 的 c
文章简介 之前在 《p5.js 光速入门》 里粗略讲过一下如何使用 p5.js 创建画布。 这次要介绍几个 p5.js 提供的画布相关的方法。 创建画布时的相关配置。 让画布绑定指定元素。 重置画布大小。 删除画布。 <br> 学习本文前你需要具备一点 p5.js 的知识，想了解的请查看 《p5.js 光速入门》。 <br> <br> 创建画布 在 p5.j
本文简介 最近有工友问我前端怎么给图片做标注。使用 Fabric.js 或者 Konva.js 等库确实可以实现，但我又好奇有没有专门做图片标注的工具呢？ 在网上搜了一下发现 Annotorious 可以实现这个功能。Annotorious 提供了图片注释和标注功能，而且用法很简单。 <br> 本文分为 【快速入门】和【API讲解】两部分。 【快速入门】部分包含 Annotorio
本文简介 点赞 + 关注 + 收藏 = 学会了 <br> 本文介绍一个能让前端优雅下载大文件的工具：StreamSaver.js ⚡️ StreamSaver.js GitHub地址 ⚡️ 官方案例 <br> StreamSaver.js 可用于实现在Web浏览器中直接将大文件流式传输到用户设备的功能。 传统的下载方式可能导致大文件的加载时间较长或造成内存占用过大的问题
本文简介 点赞 + 关注 + 收藏 = 学会了 <br> 记得以前看爆笑校园里有一集讲到，一个人对着前面开了一枪，过了一阵子弹打中他自己的后脑勺。作者想通过这个冷笑话告诉大家一件事：地球是圆的。 在 Matter.js 世界里，默认是没有边界的，也就是说你往一个方向把物体丢出去，超过画布边界后你可能就找不回那个物体了。 如果想让 Matter.js 世界变成“圆”的，可以使用 matt
本文简介 点赞 + 关注 + 收藏 = 学会了 <br> 这几天在整理书柜时看到这套书，看到梵高，想起他的点彩画。 <br> 想到点彩画派，不得不提的一个画家叫乔治·皮埃尔·秀拉。据说梵高也模仿过他的画作。 我引用一下维基百科对点彩画派的解析： 点彩画派（又称点描派；英文：Pointillism）是一种用很粗的彩点堆砌，创造整体形象的油画绘画方法。 <br>
本文简介 点赞 + 关注 + 收藏 = 学会了 在 《p5.js 光速入门》 里我们学过加载图片元素，学过过背景色的用法，但当时没提到背景图要怎么使用。 本文就把背景图这部分内容补充完整，并且会提到在 p5.js 里使用背景图的一些注意点。 <br> <br> 背景图的用法 在 p5.js 里使用背景图只需做以下几步操作即可。 使用 loadImage() 加载图片资源。
本文简介 戴尬猴，我是德育处主任 <br> 本文介绍如何使用 OpenLayers.js （后面简称 ol）。ol 是一个开源 JavaScript 库，可用于在Web页面上创建交互式地图。 ol能帮助我们在浏览器轻松地使用地图功能，例如地图缩放、地图拖动、地图标记和地图交互等。 本文适合想有JS基础，又想了解 ol 的工友。 <br> <br> OpenLay
本文简介 点赞 + 关注 + 收藏 = 学会了 <br> 如果你使用 Fabric.js 做编辑类的产品，有可能需要给用户配置字体。 这次就讲讲在 Fabric.js 中创建文本时怎么使用自定义字体、在项目运行时怎么修改字体、以及推荐一个精简字体库的工具。 <br> 学习本文前，你必须有一点 Fabric.js 的基础，如果没了解过 Fabric.js 可以阅读一下 《Fa
本文简介 点赞 + 关注 + 收藏 = 学会了 <br> 当你要复制一个 fabric 的元素时，你考虑到的是什么？是深拷贝当前选中对象再添加到画布中？ <br> 其实，fabric.js 提供了一个克隆方法，在 fabric.js 官网的案例里也有这个demo：Fabric.js demos · Copy and Paste。 这次就讲讲这个 demo。 <br&
本文简介 点赞 + 关注 + 收藏 = 学会了 <br> 本文主要介绍我在工作中使用 day.js 较多的方法。 本文并不能代替 day.js 官方文档，日常工作中该查文档的还是要查文档。 本文是写给刚接触 day.js 的工友，让这部分工友能更顺利上手 day.js。 本文不涉及 day.js 插件（王国之泪通关后再写这部分吧）。 <br> <b
本文简介 戴尬猴，我是德育处主任 <br> 这次要介绍的一个demo是"拖拽多边形定点修改多边形形状"。 其实 Fabric.js 官网也有这个demo：Fabric.js demos · Custom controls, polygon 。但这个demo可能对于刚接触 Fabric.js 的工友来说有点过于复杂，所以本文就把该demo进一步简化，简化到老奶奶也能看
本文简介 戴尬猴，我是德育处主任 <br> Fabric.js 官网有很多有趣的Demo，不仅可以帮助我们了解其功能，还可以为我们提供创意灵感。其中，Stickman是一个非常有趣的例子。 先看看效果图 从上图可以看出，在拖拽圆形时，跟圆形相连的那条红线的一端也会跟着移动。 <br> <br> 原理讲解 对 Fabric.js 有一定了解的工友可以先自己看看
本文简介 戴尬猴，我是德育处主任 <br> 欢迎来到《物理世界的互动之旅：Matter.js入门指南》。 本文将带您探索 Matter.js，一个强大而易于使用的 JavaScript 物理引擎库。 我将介绍 Matter.js 的基本概念，包括引擎、世界、物体和约束等。 本文还提供丰富的代码示例，帮助各位工友更好地理解如何使用 Matter.js 创建令人惊叹的物理场景（先画个饼吧～
本文简介 带尬猴，我是德育处主任 <br> 当今的Web开发中，图形和动画已经成为了吸引用户注意力的重要手段之一。而 Pixi.js 作为一款高效、易用的2D渲染引擎，已经成为了许多开发者的首选~~（我吹的）~~。本文将为工友们介绍PixiJS的基础知识和使用方法，希望可以和工友们**快速光速入门**，掌握 Pixi.js 的用法。 <br> 实际工作中我还没有用上 Pi
本文简介 带尬猴，我嗨德育处主任 <br> 前面写了几篇 p5.js 文章 都还没涉及到3D图形，但其实 p5.js 是提供了基础的3D图形的。 本文就从最简单的立方体讲起，并做几个小demo和各位工友一起掌握立方体的用法。 <br> <br> 立方体的基础用法 在 p5.js 里使用 box() 方法可以创建立方体。 <br> 基础语法说明 根据官
本文简介 带尬猴，我嗨德育处主任 <br> 在 canvas 里，变换是基础功能。很多基于 canvas 封装的库都有这功能，比如 《Fabric.js 变换视窗》。 变换是针对画布进行全局调整的一种能力，它可以对画布进行全局移动、缩放、旋转等操作。 p5.js 同样具备变换功能，而且还封装了很多方便的函数去实现变换功能。本文就简单介绍一下 p5.js 的变换操作方法。 <br&
本文简介 带尬猴，我嗨德育处主任 <br> p5.js 为开发者提供了很多有用的方法，这些方法实现起来可能不难，但却非常实用，能大大减少我们的开发时间。 本文将通过举例说明的方式来讲解 映射 map() 方法。 <br> <br> 什么是映射 从 p5.js 文档 中可以看到对映射的说明 说明：从一个范围内映射一个数字去另一个范围。 好家伙，使用映射来说明映
本文简介 带尬猴，我是德育处主任 <br> 虽然 Fabric.js 提供的基础功能已经很丰富了，但有时难免需要定制一些需求。比如本文要讲的 『自定义控件』。掌握创建自定义控件这个功能，能够创建更加精美和实用的图形应用程序，提高用户体验和用户满意度。 尽管 Fabric.js 的文档很一般，但 demo 还挺丰富。本文讲解 Fabric.js 官网收录的 Custom controls
本文简介 带尬猴，我是德育处主任 <br> 原生 canvas 提供了 save() 和 restore() 两个方法去管理画布状态。p5.js 作为一个 canvas 库，也理所当然的提供了状态管理的方法。在 p5.js 里这两个方法叫 push() 和 pop()。 本文主要讲解 p5.js 的 push() 和 pop() 的用法。 想了解原生 canvas 状态管理，推荐阅读
本文简介 带尬猴，我是德育处主任 <br> canvas 绘图时会根据当前状态来绘制。很多的 canvas 库都利用到这一特性。比如 p5.js 利用了 canvas 状态特性衍生出 push 和 pop 函数实现状态隔离（既然提到了，下一篇就讲这个）。 有兴趣了解 p5.js 的工友推荐阅读 《p5.js光速入门》。 <br> <br> 什么是 Canvas
本文简介 带尬猴，我嗨德育处主任 <br> 不知道你有没有遇到过在使用 Fabric.js 时无意中一些骚操作修改了元素的样式，但刷新画布却没更新元素样式？ 如果你也遇到同样的问题的话，可以尝试使用本文的方法。 <br> <br> 是否需要重新绘制 我先举个例子。 <canvas id="c" style="border:
本文简介 带尬猴，我是德育处主任 <br> Fabric.js 有图案画笔功能，这个功能可以简单理解成“刮刮卡”效果。 如果只是看 Fabric.js 文档可能还不太明白 图案画笔 PatternBrush 是如何使用。 本文将讲解如何配置这款画笔的基础属性。 <br> <br> 图案画笔（笔刷） PatternBrush 先看看效果 <br> 使
本文简介 带尬猴，我嗨德育处主任 <br> 尽管 Three.js 文档已经比较详细了，但对于刚接触 Three.js 的工友来说，最麻烦的还是不懂如何组合。Three.js 的功能实在太多了，初学者很容易被大量的新概念冲晕。 本文主要讲解入门 Three.js 必须接触的基础贴图功能。本文只讲解常用的属性，学会了常用的属性设置就知道如何查阅文档使用其他属性了～ <br>
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号
