前端SVG的学习
目标 为了可以使用svg动画库,入门下svg 学习笔记,个人记录, 学习掘金大佬德育处主任 https://juejin.cn/user/2673620576140030 rect矩形 矩形使用 <rect> 标签，默认填充色是黑色，当只设置宽高时，渲染出来的矩形就是黑色的矩形。 矩形基础属性： x: 左上角x轴坐标 y: 左上角y轴坐标 width: 宽度 height: 高度 rx: 圆角，x轴的半径 ry: 圆角，y轴的半径 通过 x 和 y 可以设置矩形位置 以图像左上角为起点进行移动 rx,ry如果只设置了一个的值,另一个值默认相同 当rect的宽度高度相同并且rx值为宽度一半的时候,就是一个圆形了 1234567<svg width="300" height="300" style="border: 1px solid red;"> <rect width="100" height="100&q ...
前端canvas的学习和将网页生成canvas图片
目标 最终可以实现二维码填充在指定图片位置,并且可以填充文字在图片中 学习笔记,个人记录, 学习掘金大佬德育处主任 https://juejin.cn/user/2673620576140030 专栏 https://juejin.cn/column/7113168145912692773 作者仓库 https://gitee.com/k21vin/thunder-monkey-canvas 第一个canvas123456789101112131415161718<body> <canvas id="c" width="300" height="200" style="border:1px solid #ccc" ></canvas> <script> //获取canvas元素 const cnv = document.querySelector('#c'); //获取canva ...
React多个echarts图表在一个页面的使用
前景 很多情况下图标都是一个,我们大概率会像下面代码一样的做法 大概流程就是获取到数据后执行初始化,因为先初始化后异步请求再设置state里面的数据回导致无法正常显示echarts(除非再次调用setOption) 下面就记录下自己解决过程 源码 https://github.com/superBiuBiuMan/react-class-test 根据ID获取DOM进行初始化123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657import React, { Component } from 'react';import * as echarts from 'echarts';import axios from 'axios';class TestEcharts extends Component { constructor(p ...
前端取图片相同颜色作为遮罩或者背景
需求 遮罩层取图片相同/相似的颜色作为遮罩 效果 做法npm库grade.js 所提供图像中前 2 个主色生成的互补渐变 https://github.com/benhowdle89/grade COLOR THIEF 只需使用Javascript即可从图像中获取调色板。 https://github.com/lokesh/color-thief https://lokeshdhakar.com/projects/color-thief rgbaster.js https://github.com/briangonzalez/rgbaster.js 一个非常简单、零依赖、基于 promise 的 javascript 库，用于从图像（在浏览器中）中提取主要颜色。 算法 基本思路都是获取每一种rgb的出现次数,进行计算分析,如果出现跨域问题还需要后端配合解决 https://kuangyx.cn/docs/%E6%96%87%E7%AB%A0/%E5%89%8D%E7%AB%AF/%E6%8F%90%E5%8F%96%E5%9B%BE%E7%89%87%E4% ...
Github action的学习
前置知识 第一个action action都建立在.github/workflows文件夹下 可以从这里建立 也可以从顶部Actions标签进入 第一个action内容如下 1234567891011121314151617name: 第一个Action on: workflow_dispatch #允许您从 "操作 "选项卡手动运行此工作流jobs: abcdef: #自定义名称 runs-on: ubuntu-latest #运行环境 steps: #步骤代表作为任务一部分执行的任务序列(可顺序也可并行) - name: 第一个action运行任务单行 run: echo hello #单行 - name: 多行输出 run: | echo hello1 echo hello2 运行 第二个action-运行在window-server上 运行在window-server上 关于 GitHub 托管的运行程序 https://docs.git ...
QQ农场明月鲨鱼学习记录
前言 个人记录使用,具体可看github当中的文档 https://github.com/superBiuBiuMan/mingyueshark [明月]重要概念URL栏简写123456789??g_tk 等效 ?g_tk=XXXX&&g_tk 等效 &g_tk=XXXX{!nc} 等效 农场主链接地址:https://nc.qzone.qq.com/cgi-bin/{!ncf} 等效 农场主链接地址: https://farm.qzone.qq.com/cgi-bin/{!mc} 等效 牧场主链接地址: https://mc.qzone.qq.com/cgi-bin/{!wnc} 等效 文字版农场主链接地址{!wmc} 等效 文字版牧场主链接地址{!hydra}等效https://hydra.qzone.qq.com/cgi-bin/{!card}等效 魔卡主链接地址https://card.qzon ...
nvm安装版本后设置默认镜像地址和nvm list available出现空白解决办法
如题12npm config get registryhttps://registry.npmjs.org/ 发现镜像地址依旧是默认的 解决 运行输入npm config list 查看这个选项对应的目录 修改为的内容如下 12home=https://npmmirror.comregistry=https://registry.npmmirror.com/ 或者也可以 12home=https://npmmirror.comregistry=https://npmmirror.com/ 再次查看,修改成功 nvm list available出现空白解决办法 找到nvm的安装路径,建立settings.txt文件 添加下面2条,如果有就替换掉 12node_mirror: https://npmmirror.com/mirrors/node/npm_mirror: https://npmmirror.com/mirrors/npm/ 最终内容如下 即可解决
index.min.js1 Warning value should in shape of { value string number, label ReactNode } when you set labelInValue` to true`
index.min.js1 Warning value should in shape of { value string number, label ReactNode } when you set labelInValue to true 因为开启了labelInValue属性,所以在设置默认值的时候,就应该传递对应数据,格式也就是要{ label:””,value:”” }
前端map标签(创建热点区域或是点击图片指定区域跳转对应链接))
前言 点击整张图片的某一部分,可以实现自定义跳转或者一些事件 利用img和map和area标签实现 先来看下实现 https://www.w3cschool.cn/tryrun/showhtml/tryhtml_areamap 1234567<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"><map name="planetmap"> <area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif"> <area shap ...
前端进度条和进度条流光效果
前言 进度条的实现学习这个的,这里只是记录下自己笔记 https://bytefish.medium.com/css-awesome-trick-how-to-create-a-progress-bar-that-changes-color-according-to-progress-be9652ebdd1c 在线演示地址(原作者) https://codepen.io/bytefishmedium/pen/VwXYKQK 在线演示地址(添加了一个流光) https://codepen.io/superbiubiuman/pen/bGZNbwp 设定的范围颜色显示 12345678980 <= --percent <= 100 绿色(green)60 <= --percent <80 蓝色(blue)40 <= --percent < 60 紫色(purple)20 <= --percent < 40 桔色(orange)0 <= --percent < 20 红色(red) 效果差不多这样子 有 ...
