- 博客(37)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 canvas 有趣的弹簧效果
我给了个 0.1，由于一开始初速度为 0，所以阻力为 0，只用等到动起来有速度的时候才会产生阻力。两个小球之间有一根弹簧，这里有一条线表示，其中左球固定，在点击开始后，右球开始做。的方向，其方向永远是右球的球心指向左球的球心，其大小根据。到水平方向和垂直方向的大小，再用这个大小分别乘以水平。现在我们所有力的大小和方向都求出来了，然后根据向量。，即可以渲染出效果，这里除以100是防止速度太快。然后再把合成后的力分解成水平和垂直的两个。给的是 10，得到 x 和 y 方向的。，其方向和速度方向相反，
2023-12-11 23:07:36
465
原创 canvas 轮廓路径提取效果
为了让效果更加酷炫点，简单的用鼠标实现画笔功能，并且边框用虚线，点击绘制轮廓的同时把原内容隐藏，这里贴的是gif，加载可能比较慢可能要稍微等一下。上面图其实就黑和白两种状态，代表是内容是否是完全透明的，可以通过二进制的方式优化状态比较的过程，比如第一个。上的像素和他的上、左、上左的像素形成的区域，贴一张网上找到的图，很形象直观的表达了这个算法。种状态，每种状态右下角的点就是当前准备行进的点，我们看上图的第一张像素图，红框中像素内容是。，即当行进点获取四周的状态时可以通过左移的方式得到当前方格的二进制。
2023-12-03 12:00:44
460
原创 canvas 凸包效果
如上图，由于没有特殊情况，到这里我们可以一直把点入栈，那什么是特殊情况呢，我们继续往右行进，把图片放大一些方便理解。不为0的像素，我们把这个像素的坐标入栈，现在我们栈的长度是2，我们以此方法继续行进。可能刚开始看有点懵逼，没事，其实算法思路并不复杂，继续往下看，以下是随便勾勒的。的像素，就是我们要找的起始点，然后我们将它的坐标入栈，继续遍历，找下一个点。的所有像素点，再做逐一分析，首先，我们要找到一个起始点，即最小的。以上的图都是纯手画的，有点手残，我们看下最终代码的效果。
2023-12-02 15:27:04
969
原创 Vue修炼系列教程 - 元婴篇2
上一期我们已经学完如何封装组件，使用props和emit方法在父子组件中进行通信，今天我们更进一步，讲一下组件中很常用的知识，slot插槽(本章不用slot-scope，和slot属性，统一使用v-slot，而v-slot的可以写成#，这样是vue官方推荐的，v-slot具备了slot-scope和slot的能力)
2022-02-26 09:40:39
716
原创 Vue修炼系列教程 - 元婴篇1
前言恭喜学到这的小伙伴们，你们突破了筑基层，升级到了元婴层啦！我们继续修炼！回顾上一期，我们讲了比较优雅使用ref操作dom的，以及v-model的一些应用，今天我们来学习封装组件组件日常开发中封装组件是十分重要的，我们举个场景帮助快速理解组件的含义。比如我们在a页面有个点击按钮可以自增计数功能，之后发现我们b页面、c页面也要这个功能，这个时候如果把同样的功能代码也copy到b页面、c页面是不是觉得很麻烦，在做重复的工作？这个时候我们就可以把这个功能封装成一个组件，然后a、b、c3个页面都引入这
2022-02-23 22:42:42
1137
2
原创 Vue修炼系列教程 - 筑基篇5
上一章主要讲了vue主要的生命周期mounted和Unmounted以及常用修饰符stop和prevent的场景使用，今天主要学习vue中ref(这里的ref和之前讲的使普通变量变成响应式变量不是同一个东西)的使用，以及v-model的使用
2022-02-21 22:51:45
716
原创 Vue修炼系列教程 - 筑基篇4
前言上一章我们讲了计算属性computed和侦听属性watch，这一章讲讲vue3中常用的生命周期和修饰符OnMounted/OnUnmountedonMounted在组件挂载成功的时候触发(此时能获取得到当前dom元素)，一般的场景用于对初始化时需要做得事情可以放这里做，比如api请求等而onUnmounted在组件卸载的时候触发，比如定时器销毁防止内存泄漏等，比如以下这个功能，进入页面时开启一个定时器，离开时需要销毁如果是在项目中，放在onMounted最常见的应该就是api请.
2022-02-20 20:45:08
619
原创 Vue修炼系列教程 - 筑基篇1
准备有空花点时间写一个对小白友好的Vue系列文章，同时也希望让看到的有缘人可以更快速的掌握和使用Vue，一起修炼成长吧！
2022-02-16 23:04:52
521
原创 Vue - 项目中如何封装好一个业务组件
在日常业务开发中，我们会经常封装一些业务组件，一个页面中可能就有多个业务组件构成，这里和大家分享一下个人的经验，如何封装好业务组件，便于维护
2022-02-12 19:16:34
4163
原创 js原型和原型链 - 草履虫都看得懂
1、概念搬自MDN -实例对象的原型链指向它构造方法的原型。原型使用prototype访问，原型链用__proto__访问，虽然__proto__更大主流浏览器都支持，但MDN更推荐使用以下方法进行原型链读写，为了方便讲解文章使用__proto__来举例。//get __proto__Object.getPrototypeOf();// set __proto__Object.setPrototypeOf();关于原型和原型链，举个简单的例子const object = new O..
2021-08-08 16:50:40
207
原创 基础巩固 - flex宽度为内容宽度
当设置标签display:flex则默认标签具有display:block的特性，宽度会根据父元素而撑满，如下<divclass="box-parent"> <div class="box">box</div></div>.box-parent{ width: 300px;}.box {display:flex; background: #fff;}上面代码中box设置flex布局，宽度默认和父元素一样为300px...
2021-07-04 19:48:33
6465
2
原创 nuxt - 自动生成动态路由bug
公司需要启动一个新的ssr项目，就选用nuxt搭建，搭建的过程也踩过不少的坑，后面有空再写一篇nuxt的坑点和开发注意事项，今天主要讲关于nuxt自动生成router.js的一个bug(可以直接拉到最后有图展示)，和通过源码分析找到原因的过程。说实话个人感觉自动生成路由这个功能有点鸡肋这里就不展开为啥鸡肋，直接进入主题。nuxt有个自动生成路由或者动态路由的功能，这里引用下官网的例子项目pages下的文件结构：pages/--| _slug/-----| comments.vu
2021-07-04 19:42:42
1709
1
原创 js - 单点登录
1、引言最近在改造项目前端登录流程，有些心得，分享一下如何实现单点登录2、什么是单点登录单点登录(SingleSignOn)，也简称sso，意思就是在一个项目手动登录后，在访问同一登录体系的另一个项目时会自动登录。3、实现1、思路1、单点的实现普通的登录的流程通过账号密码向后端换取token，或者通过账号密码向后端获取code，在用code换取token，不论哪种方式，最终前端都会得到一个token，在将token写入到localStorage或者cookie，在接口..
2021-07-04 19:39:43
1558
原创 实现vue数据双向绑定
关于vue数据双向绑定也是面试很喜欢问的题目了，这里讲下实现方式，效果图、源码、demo在文章末尾首先看下vue的基本结构<div id="app"><div>{{a.b.c}}</div></div>new Vue({ el: '#app', data:{a:{ b: { c: 1 } }},});上面是一个非常非常简单的模板，我们来一步步达到数据双向绑定的效果数据劫持：e...
2021-07-04 19:35:07
1162
4
原创 实现vue数据双向绑定
关于vue数据双向绑定也是面试很喜欢问的题目了，这里讲下实现方式，效果图、源码、demo在文章末尾首先看下vue的基本结构<div id="app"> <div>{{a.b.c}}</div></div>new Vue({ el: '#app', data: { a: { b: { c: 1 } } },});上面是一个非常非常简单的模板，我们来一步步达到数据双向绑定的效果数据劫持：expo
2020-11-20 09:45:46
536
原创 微信移动端开发 - 账号登录授权
登录授权获取openid过程：通过appid以及一些其他参数拼接微信公众号的登录授权链接，通过所填写的回调地址会返回一个code参数回来，通过code向后台发起请求获取openid，此code只能使用一次，即获取一次openid后该code作废，获取的openid相当于token，需要缓存(storage) data () { return { // 填写你...
2019-04-09 13:49:59
812
原创 Vue单页面应用优化SEO之预渲染
这里优化SEO重点说vue-cli框架，毕竟是spa项目，所以SEO十分不友好，原因在于它自身并不是静态html，而是由js动态生成的(通过文档碎片劫持的方式以及Object.defineProperties等方法，有兴趣可以去研究研究vue的原理)，导致最后打包完成后只有一个光秃秃的静态index.html入口,大致内容就是外部引入了几个js，剩余的文件就只有static中的js、css、img...
2018-12-06 14:06:50
3148
1
原创 Vue怒踩微信JS-SDK中配置的坑 - 签名错误
前言这几天公司需要做微信端h5项目，需要用到微信扫一扫功能，就需要涉及到配置微信JS-SDK的问题，怎么配置怎么生成签名这边就不说了官方文档(https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)都说的比较详细，按照官方使用接口签名校验工具(https://mp.weixin.qq.com/debug/cgi...
2018-10-09 14:05:54
6414
1
原创 js实现图片粘贴到网页
实现通过按下ctrl + v将粘贴板上的图片粘贴到网页中,话不说直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片粘贴</title> <style>
2018-07-06 15:40:15
4360
1
原创 js 实现纯前端将数据导出excel两种方式，亲测有效
由于项目需要，需要在不调用后台接口的情况下，将json数据导出到excel表格，参考了好多资料以及很多大佬写的博客终于实现，兼容chrome没问题，其他还没有测试过，这边介绍两种实现方式，并附上代码和gif动图，博主不才还望轻喷
2018-05-23 14:33:27
228372
146
原创 clip属性参数详解
前面说到图片裁剪主要用到clip属性，是css的clip不是canvas的clip()，这里详细说一下参数的意义w3c是这么介绍的设置元素的形状。唯一合法的形状值是clip : rect (top, right, bottom, left)它是一个css属性，用来进行矩形裁剪，通过传入对应参数，这4个参数的意义为：top：矩形上长对应父元素上长的距离(上长就是矩形上边的长)right： 矩形右宽对...
2018-05-15 16:48:50
3196
原创 Vue 实现图片预览、裁剪并获取被裁剪区域的base64(无组件)
前言最近公司项目需要用到图片裁剪技术，便着手写了一个，可以说是用Vue实现的原生裁剪，毕竟也只是去操作dom，不过vue黑魔法有个ref属性，使用的方法和原生dom一模一样但是更节省dom操作的消耗裁剪思路这边大致介绍一下裁剪图片的思路，通过input[type=file]将图片文件流读取，转换成base64后给img标签进行图片预览，在img标签的背后放一个宽高和它一样的canvas并把刚才获取...
2018-05-15 16:15:45
6818
11
原创 QQ音乐源更换问题
在我前面提到的原有的源上面加个参数 guid=126548448原博客以更新传送门 => https://blog.csdn.net/hhzzcc_/article/details/79769386
2018-04-30 19:34:52
1543
原创 js实现雪花效果(超简单)
使用js实现雪花飘落效果，话不多说直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>snow</title> <style> body,html{ ...
2018-04-09 15:27:17
17329
6
原创 纯css实现3D立方体
纯css实现3D立方体特效，通过3D旋转和平移原理实现，话不多说直接贴代码<html><head> <style type="text/css"> body,html{ margin: 0; } body{ display: flex; ...
2018-04-04 14:32:44
3411
1
原创 express + socket.io实现超简易聊天室
什么是socket.iosocket.io是webSocket的一个封装组件，实现双向通信，可以用这个来实现聊天室功能、在线小游戏等等，是个有趣好玩的东西，博主就喜欢捣鼓这些实现聊天室思路聊天室就是要聊天嘛，就像打电话一样，我这边说话你那边应该要马上听到，所以就需要用到双向通信，浏览器发出一条信息比如是一个字符串'message',服务端接收然后立马将它发送出去给需要接收的浏览器首先下载expre...
2018-04-04 11:38:34
3283
2
原创 使用js插件实现简单有趣的人脸识别
前阶段无聊想搞个人脸识别玩玩，发现一个有趣的插件包，虽然不算特别强大但是相对还是能实现效果，主要是它简单啊，让你5分钟内就会用，可以去玩玩看，现在我把它拿出来和大家分享这个插件就是jquery.facedetection首先npm install jquery.facedetection先引入jquery<script src="https://code....
2018-04-04 09:35:04
16242
7
原创 vue 设置proxyTable参数进行代理跨域
什么是代理跨域浏览器之间有同源策略，出于安全考虑不同域之间不允许获取数据，除了几个特殊的例子<img>、<script>、<audio>等标签可以进行跨域但是通常都是以get的形式，如果用js的axios去远程获取的话进会触发同源政策，除非你服务端的代码设置了header同意让你访问，明显这很不合理呀！。现在不是都流行前后端的分离吗，后端代码跑掉了只剩下...
2018-04-03 17:28:15
1538
原创 音乐播放器之QQ音乐最新api，亲测可用
大家好，前段时间重写了自己的音乐播放器，源码放在github上，源码地址和项目地址下面都有，如果喜欢记得star一下哈。由于之前给大家分享的api虽然可以用，但是版本太旧了，很多也没有了歌词，今天博主给大家分享一个最新的qq音乐api，亲测可用，话不多说直接上代码最新音乐 let url = 'https://c.y.qq.com/v8/fcg-bin...
2018-03-31 15:58:21
58005
61
原创 QQ音乐api 最新版，亲测可用
最近这个api出现了403问题，已经找到原因了原因是 歌曲不能再以第一参数当id了 要以倒数第5个 如以上的例子 002qU5aY3Qu24y当id，而且前面要加C100，完整的就是 http://ws.stream.qqmusic.qq.com/C100002qU5aY3Qu24y.m4a?fromtag=0还要更多详细内容可用看我上一篇写的 http://blog.csdn.net/hhzzc...
2018-02-27 09:17:51
25239
6
原创 vue脚手架基本使用(包括vue-router的基本使用)
本篇文章主要写给刚刚使用vue-cli的新手们，话不多说感觉看下面代码吧！首先在大前提vue-cli已经安装好的情况下，并且cnpm install后(官网使用的是npm，但这里推荐用cnpm比npm快而且npm有时候会有出现卡住的现象)，这里有个小提醒就是关于是否开启eslint,这个是对你写的代码进行规范化的一个工具，对于刚接触的新手们建议关闭，不然代码写的不符合它的规范你的编译器
2018-02-04 14:02:47
24435
12
原创 QQ音乐API整理
由于在网上看过很多音乐API都是一半可以用不是很全，有的API有经过改动，造成无法访问，今天来个大家总结一下QQ音乐的API，可能还不是很全，仅供参考，但亲测可用，数据获取方式用的都是jquery的jsonp形式获取数据，歌词除外:## 歌曲信息搜索：var songName='青花瓷';//歌曲或者歌手名字$.ajax({ url:"http://s.musi
2017-12-15 10:26:59
9540
10
JavaScript - 矩形碰撞检测
2021-07-05
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人