只要我成为一个废物，就没人能够利用我！ <br> 雷猴啊，我是一只临期程序猿。打过几年工，写过几行代码。但今天我不想聊代码，我们聊聊学习这件事。 <br> 技术年年更新，尤其是前端框架，很多时候觉得学习速度都要跟不上框架的更新速度了。 而且还不能不学，不学就跟不上，甚至连面试机会都没有。 即使一直在一家公司苟着，如果只是靠勤奋工作，不提升自己的技能，也很难晋升。 比如最近流行的一个梗：前端的职业天花板是小组长。如果不抽点时间来学习其他领域的知识，那天花板真的就非常清晰了。 <br> 那应该如何高效学习呢？市面上有很多学习方法，但今天我想分享的是前段时...

本文简介 戴尬猴，我是德育处主任 <br> 本文介绍如何使用OpenLayers.js（后面简称ol）。ol是一个开源JavaScript库，可用于在Web页面上创建交互式地图。ol能帮助我们在浏览器轻松地使用地图功能，例如地图缩放、地图拖动、地图标记和地图交互等。 本文适合想有JS基础，又想了解ol的工友。 <br> <br> OpenLayers简介 ⚡️OpenLayers官网 ol使得在任何网页中放置动态地图变得很容易。它可以显示从任何来源加载的地图块、矢量数据和标记。OpenLayers的开发是为了进一步利用各种地理信息。它是完全免费的，开放源...

本文简介 点赞+关注+收藏=学会了 在《p5.js光速入门》里我们学过加载图片元素，学过过背景色的用法，但当时没提到背景图要怎么使用。 本文就把背景图这部分内容补充完整，并且会提到在p5.js里使用背景图的一些注意点。 <br> <br> 背景图的用法 在p5.js里使用背景图只需做以下几步操作即可。 使用loadImage()加载图片资源。 使用background()设置背景图。 //创建画布并加载图片 functionsetup(){ //创建一个500x500的画布 createCanvas(500,500) //加载图片 letbg=loadImage('...

本文简介 点赞+关注+收藏=学会了 <br> 这几天在整理书柜时看到这套书，看到梵高，想起他的点彩画。 <br> 想到点彩画派，不得不提的一个画家叫乔治·皮埃尔·秀拉。据说梵高也模仿过他的画作。 我引用一下维基百科对点彩画派的解析： 点彩画派（又称点描派；英文：Pointillism）是一种用很粗的彩点堆砌，创造整体形象的油画绘画方法。 <br> 说简单点，就是用圆点画画，比如秀拉的这幅作品《检阅》。 <br> 这种风格除了用在艺术绘画方面，在眼科医院体检的时候也会用到，比如测红绿色盲。 然后我又继续想啊想，想到我们用canvas好像也能...

本文简介 点赞+关注+收藏=学会了 <br> 记得以前看爆笑校园里有一集讲到，一个人对着前面开了一枪，过了一阵子弹打中他自己的后脑勺。作者想通过这个冷笑话告诉大家一件事：地球是圆的。 在Matter.js世界里，默认是没有边界的，也就是说你往一个方向把物体丢出去，超过画布边界后你可能就找不回那个物体了。 如果想让Matter.js世界变成“圆”的，可以使用matter-wrap这个插件。 <br> <br> matter-wrap是什么？ matter-wrapGitHub地址 <br> matter-wrap官方是这样介绍自己的 This...

本文简介 点赞+关注+收藏=学会了 <br> 本文介绍一个能让前端优雅下载大文件的工具：StreamSaver.js ⚡️StreamSaver.jsGitHub地址 ⚡️官方案例 <br> StreamSaver.js可用于实现在Web浏览器中直接将大文件流式传输到用户设备的功能。 传统的下载方式可能导致大文件的加载时间较长或造成内存占用过大的问题，使用<a>标签打开新页面下载文件，遇到.txt或者.mp4之类的文件可能就直接在页面展示了，不会触发下载功能。而StreamSaver.js则通过流式下载的方式解决了这些问题。 StreamSaver.js...

本文简介 最近有工友问我前端怎么给图片做标注。使用Fabric.js或者Konva.js等库确实可以实现，但我又好奇有没有专门做图片标注的工具呢？ 在网上搜了一下发现Annotorious可以实现这个功能。Annotorious提供了图片注释和标注功能，而且用法很简单。 <br>本文分为【快速入门】和【API讲解】两部分。 【快速入门】部分包含Annotorious的安装、使用、导入导出的讲解。这几点应该是项目中比较核心的流程，给希望快速入门的工友提供一丢丢帮助。 【API讲解】这部分主要讲一下我认为比较常用的功能。注意：是“我认为”。 <br> <br>...

文章简介 之前在《p5.js光速入门》里粗略讲过一下如何使用p5.js创建画布。 这次要介绍几个p5.js提供的画布相关的方法。 创建画布时的相关配置。 让画布绑定指定元素。 重置画布大小。 删除画布。 <br> 学习本文前你需要具备一点p5.js的知识，想了解的请查看《p5.js光速入门》。 <br> <br> 创建画布 在p5.js里创建画布的方法叫createCanvas，但其实如果你不使用该方法一样可以创建画布。 如果你使用了p5.js的setup()或者draw()之类的生命周期函数，它们也会默认在页面上创建一个画布。 functionset...

本文简介 在刚接触p5.js时我以为这只是一个艺术方向的canvas库，没想到它还支持视频文件和视频流的播放。 本文简单讲讲如何使用P5.js播放视频。 <br> <br> 播放视频文件 p5.js除了可以使用video元素播放视频外，还支持使用image控件播放视频。 <br> 方式1：video元素播放视频 基础用法 p5.js的createVideo()方法可以创建一个<video>元素。 createVideo(src,[callback])可以传入2个参数： src:视频路径（必传）。可以传一个字符串类型的视频路径；也可以传入字符串数...

本文简介 p5.js作为一款艺术类的canvas库，对颜色方面的支持是挺下功夫的，比如本文要介绍的渐变方法。 <br> lerpColor() 要实现渐变效果，可以使用lerpColor()方法。 lerpColor的作用是混合两个颜色以找到一个介于它们之间的颜色。 语法是这样的： lerpColor(c1,c2,amt) c1:开始颜色 c2:结束颜色 amt:介于0和1的数字 <br> 举个例子，我想取出红色和蓝色中间的那个过渡颜色的值，可以这样写 functionsetup(){ createCanvas(300,300) noStroke() cons...

本文简介 本文介绍Three.js的基础方法：监听材质加载。 在《Three.js基础纹理贴图》里介绍了如何给图形贴图，贴图前需要先把纹理加载好。我们基于这篇文章继续讲解如何监听材质加载成功或者失败。 <br> <br> 监听单个材质 我们使用TextureLoader的load()方法加载纹理时，第一个参数传入纹理的路径，之后还可以多接受3个函数类型的参数。 根据Three.js的TextureLoader.load文档介绍，这几个参数是： 【参数1】url:文件的URL或者路径。 【参数2】onLoad:材质加载完时调用 【参数3】onProgress:材质加载过...

精力管理就好比是计算机的内存清理，你以为关掉一些程序就行了，结果你还是卡成翔。 我的现状 雷猴啊，我是一个临期程序员。打过几年工，被好几个同事问过我为什么精力这么旺盛。 这两年我大多数情况都是早上8点前就到公司（原本9点上班，后来调成8点半，晚上要是加班就可以多赚半小时了），属于工贼类型。 晚上回到家还有精力打游戏、看书、学习。 <br> <br> 为什么要提升精力 几年前我还是一只前端程序猿，当时刚从JQuery转Vue1.0，学完Vue1.0发现公司的新项目开始用Vue2.0，和外部对接的项目是用react。那段时间真的有点疲于奔命的感觉，很累。一天到晚都想...

本文简介 点赞+关注+收藏=学会了 这几天在整理书柜时看到这套书，看到梵高，想起他的点彩画。 想到点彩画派，不得不提的一个画家叫乔治·皮埃尔·秀拉。据说梵高也模仿过他的画作。 我引用一下维基百科对点彩画派的解析： 点彩画派（又称点描派；英文：Pointillism）是一种用很粗的彩点堆砌，创造整体形象的油画绘画方法。 说简单点，就是用圆点画画，比如秀拉的这幅作品《检阅》。 这种风格除了用在艺术绘画方面，在眼科医院体检的时候也会用到，比如测红绿色盲。 然后我又继续想啊想，想到我们用canvas好像也能做出一款点彩画的绘图工具，但用原生的方式写是不可能的，因为我懒。思前想后，还是觉...

本文简介 戴尬猴，我是德育处主任 <br> 欢迎来到《物理世界的互动之旅：Matter.js入门指南》。 本文将带您探索Matter.js，一个强大而易于使用的JavaScript物理引擎库。 我将介绍Matter.js的基本概念，包括引擎、世界、物体和约束等。 本文还提供丰富的代码示例，帮助各位工友更好地理解如何使用Matter.js创建令人惊叹的物理场景（先画个饼吧～）。 <br> 本文是我的学习笔记和个人理解，在翻译和部分概念的理解上可能存在一点偏差，如果发现本文有什么错漏的地方，请自行调节呼吸频率。我懒得改～ 本文前1000字都在讲一些基础概念，你觉得无聊可以...

本文简介 戴尬猴，我是德育处主任 <br> Fabric.js官网有很多有趣的Demo，不仅可以帮助我们了解其功能，还可以为我们提供创意灵感。其中，Stickman是一个非常有趣的例子。 先看看效果图 从上图可以看出，在拖拽圆形时，跟圆形相连的那条红线的一端也会跟着移动。 <br> <br> 原理讲解 对Fabric.js有一定了解的工友可以先自己看看官方案例。 还不了解Fabric.js的可以看看《Fabric.js从入门到？？？》 <br> 这个案例的代码其实不长，案例中用到的方法我在之前的文章中基本有提到过。 简单罗列一下案例中用到的...

本文简介 戴尬猴，我是德育处主任 <br> 这次要介绍的一个demo是"拖拽多边形定点修改多边形形状"。 其实Fabric.js官网也有这个demo：Fabric.jsdemos·Customcontrols,polygon。但这个demo可能对于刚接触Fabric.js的工友来说有点过于复杂，所以本文就把该demo进一步简化，简化到老奶奶也能看得懂的！ 先看看效果（录制gif的工具有点小瑕疵，导致多边形红色填充色“被弄脏了”）： 完整代码在文末。 <br> <br> 原理分析 要实现“拖拽多边形定点修改多边形形状”这个功能有很多方案，比如Fabric.j...

本文简介 点赞+关注+收藏=学会了 <br> 本文主要介绍我在工作中使用day.js较多的方法。 本文并不能代替day.js官方文档，日常工作中该查文档的还是要查文档。 本文是写给刚接触day.js的工友，让这部分工友能更顺利上手day.js。 本文不涉及day.js插件（王国之泪通关后再写这部分吧）。 <br> <br> day.js简介 day.js是一个专门处理日期和时间的工具库，它的体积只有2KB，非常小。 <br> <br> 安装day.js npm 安装 npminstalldayjs--save 使用 //引入da...

本文简介 点赞+关注+收藏=学会了 <br> 当你要复制一个fabric的元素时，你考虑到的是什么？是深拷贝当前选中对象再添加到画布中？ <br> 其实，fabric.js提供了一个克隆方法，在fabric.js官网的案例里也有这个demo：Fabric.jsdemos·CopyandPaste。 这次就讲讲这个demo。 <br> <br> 实现思路 动手之前，我们先理清思路。 要复制元素，首先就得有元素，所以我们在页面创建一些元素（好像再讲废话）。 复制前，肯定需要有被复制的目标，我们可以使用canvas.getActiveObject(...

本文简介 带尬猴，我是德育处主任 Fabric.js有图案画笔功能，这个功能可以简单理解成“刮刮卡”效果。 如果只是看Fabric.js文档可能还不太明白图案画笔PatternBrush是如何使用。 本文将讲解如何配置这款画笔的基础属性。 图案画笔（笔刷）PatternBrush 先看看效果 使用图案画笔 图案画笔（笔刷）的用法其实和普通的画笔差不多，只是多了个配置图片的操作。 核心的操作有以下几步： 画布开启绘图模式 加载图片 创建图案画笔 设置图案画笔的source指向图片 使用图案画笔 <canvasid="c"style="border:1pxsolidccc;"...

本文简介 点赞+关注+收藏=学会了 本文将以前端开发者的视角，和各位工友进入iOS开发的世界。 无论你是想要扩展技能领域，还是对iOS开发充满好奇，花一个下午学习本文都能打开iOS开发这扇门（画饼）。 学完本文你会掌握一点swift基础语法，并且开发出一款iOS应用。 阅读本文前你至少需要掌握一门编程语言，如果你是前端开发者，最好懂一点typescript，这对学习swift基础语法来说有点帮助。 准备工作 首先，你需要有一台苹果电脑。 其次，你还需要有一个苹果账号，可以在苹果官网申请。 最后，下载一个Xcode，在AppStore可以找到。 虽然评分有点低，但你还是得用它。 ...