- 博客(191)
- 资源 (4)
- 收藏
- 关注
RSS订阅
原创 three.js学习(一)
这里是使用vite创建的项目，所以可以直接使用import引入1、安装three.jsnpm i three2、引入threeimport * as THREE from 'three'3、three使用时的逻辑three是通过canvas这个标签调用webgl的一些方法使用three.js时要知道场景、灯光、骨架、材质、摄像头场景中包含灯光和物体物体由骨架和材质组成灯光决定了物体在场景中表现的形式（比如投影方向之类的）摄像头就相当于观察场景的眼睛，不然光有场景没眼看的话不就啥都看
2022-04-13 18:09:23
1626
原创 Vue复习
在render函数执行后，vue实例中的dom成功挂载到指定元素上时触发，此时可以用通过ref获取真实的dom元素，但不能保证所有子组件也挂载成功，可以用$nextTick确保可以正常获取和操作子元素。在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用，此时this可以获取到vue实例，但是无法调用和获取vue中的data和methods中的属性和方法。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。指令的值可能发生了改变，也可能没有。
2023-10-24 09:33:01
144
原创 原生JS实现拖拽排序
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> * { pa
2023-09-14 14:19:17
311
原创 uniapp视频播放器
需要注意的是ios使用设置屏幕锁定方向时需要设置一些信息。app(android和ios)使用。目前只有app中支持竖屏横批选集。android视频全屏是通过。注：用的是旧版本的这个组件。小程序只支持设置倍速。
2023-06-26 18:01:44
1189
1
原创 html中使用vue3中setup的dplayer播放器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>
2023-06-19 21:26:52
1153
原创 ts泛型练习
2、Partial可以将必填的属性全部转为可选属性（Require相反的作用）使用内置Record创建对象和直接定义interface两种声明对象泛型。3、我们经常需要通过[]去获取对象的某个属性。会报下面这样的错误提示。
2023-03-28 15:12:51
159
1
原创 微信小程序裁剪视频部分内容导出
如果是单纯的想裁剪视频的话，微信小程序提供了一个非常便捷的API openVideoEditor如果要更换音频轨道，或者在为视频增加什么样式，就会分别获取到视频的视频轨道和音频轨道和视频的每一帧首先是获取视频的每一帧微信小程序提供了 createVideoDecoder API用来解析视频的帧数，虽然我用的时候总是感觉丢帧，但目前也没找到别的办法下面我们来获取视频的帧，并生成每一帧的图片，会用到 createOffscreenCanvas这个API用来创建一个离屏画布首先如果是选择视频的话可以直接获取到
2022-07-14 14:22:23
2857
31
原创 ts中的设计模式
单列模式整个应用只用实例化一次的类，常用于整个应用中的音频管理（比如游戏中的控制播放声音的操作）无论调用多少次都只会初始化一次class AudioManager { private static _instance = null; // 通过私有化构造函数让外界无法直接new private constructor() { console.log('初始化') } // 这个方法必须是静态方法 public static Instance(){ if(!A
2022-03-08 15:56:41
5179
2
原创 canvas绘制海报中封装的方法
封装的方法// * 获取图片信息用来绘制//* @param { String } src - 图片的路径 本地路径或者网络都可以//* /getImageInfo(src) { return new Promise(r => { uni.getImageInfo({ src, success: (res) => { r(res) }, }) })},// * 绘制不会换行的文字//* @param { Object } ctx - ca
2021-11-26 14:07:18
508
2
转载 获取url中参数
// 创建一个URLSearchParams实例const urlSearchParams = new URLSearchParams(window.location.search);// 把键值对列表转换为一个对象const params = Object.fromEntries(urlSearchParams.entries());function getParams(url) { const res = {} if (url.includes('?')) { const st
2021-11-22 09:15:32
109
原创 微信浏览器打开APP
微信浏览器会阻止在其中直接打开APP 所有一般需要引导用户去其他浏览器但是如果还是想在微信浏览器直接打开APP的话可以通过 wx-open-launch-app这个组件这里是官方文档需要的一些信息在使用这个组件之前我们需要两个appid和一个AppSecretappid（服务号的appid和需要被打开的appid）AppSecret（服务号的AppSecret）申请服务号（APP和服务号绑定在一个微信开发平台上面）服务号申请好之后设置IP白名单和JS接口安全域名之后按照下图进行操作，关联需
2021-10-27 14:42:47
3512
2
原创 从0开始的canvas学习(三)将视频或图片处理成黑白的
从0开始的canvas学习(一)从0开始的canvas学习(二)延续之前将图片或者视频绘制到画布上的方法之后现在假如我们要将视频或者图片处理处理成一些自己想要的效果比较黑白或者让颜色对比更加明显，我们可以通过getImageData()和putImageData()这两个API去实现显示效果简单描述一下要使用的APIgetImageData()把画布中的像素数据拿出来putImageData()向画布中填充色值大概流程获取到画布元素之后把图片绘制到画布上绘制结束后通过getIma
2021-07-27 09:10:07
494
原创 webpack常用的打包配置
webpack打包webpack在项目根目录创建一个webpack.config.js文件webpack.config.js主要有五个属性module.exports = { entry:"", output:{ filename:"", // 输出的文件名 path:"" // 文件输出的位置 }, module:{ rules:{ text:'正则表达式', // 处理匹配到的文件
2021-07-27 09:08:51
1903
2
原创 从0开始的canvas学习(二)
本文将讲到微信小程序画布和html设置向画布中导入图片和获取视频某帧以及导出图片向画布上面加载图片drawImage会用到这个api首先先看看官方怎么说一、html首先要等把图片加载完成后再调用这个api总体还是蛮简单的<canvas id="myCanvas"></canvas><script> var ctx = myCanvas.getContext('2d') var myImage = new Image() myImag
2021-07-23 09:33:57
407
原创 canvas基础(一)
canvas感觉很炫酷获取画布对象getContext的参数有两种2d和webgl这篇文章主要说的是2dwebgl会在我之后的其他文章里涉及，像一些3d效果就可以用它实现效果还是蛮炫酷的<canvas id="myCanvas"></canvas><script> var ctx = myCanvas.getContext('2d')</script>canvas 常用的一些属性和方法1、fillStyle(属性)主要是用填充
2021-07-21 16:43:37
147
1
原创 html环形进度条
最近看到在一个网站是看到了这个这种样式发现它是div+css实现的一般的话是用画布实现的、所以我仿照这个思路写了一个弧形进度条使用css和html还有var()函数 实现环形进度条最终效果[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SKRLCmNm-1626331310055)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/343bf207b3b244b29be6ff1cf6acb9b8~tplv-k3u1fbp
2021-07-15 14:42:24
1875
4
原创 迭代器和promise替换async/await
function awaitDome(){ return new Promise((r) => { setTimeout(function(){ r(1) console.log(1) },2000) }) }async function asyncDome(){ console.log('await',await awaitDome()) console.log(2)}如果只有一个异步操作的话很简单function awaitDome(){ return ne
2021-06-29 11:23:58
308
3
原创 grid布局笔记
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。grid-template-columns列内设置规定的宽度大小grid-template-rows行内设置规定的高度大小grid-auto-columns列内没有被设置的宽度大小grid-auto-rows行内没有被设置的高度大小 display
2021-06-28 18:14:44
283
1
转载 prefixfree.min.js 的用途
简单而言,这东西就是自动加前缀的,在link中，或是style中，或是dom元素的style中书写CSS3 code，或是jQuery .css()方法此脚本会自动补上需要的前缀，让响应的浏览器支持该CSS3属性避免了一些老长的浏览器前缀兼容性,比如:使用方法:在文档开始头部调用;...
2021-06-09 14:06:20
174
2
原创 apicloud打开地图导航
//百度坐标转高德（传入经度、纬度）function bd_decrypt(bd_lng, bd_lat) { var X_PI = Math.PI * 3000.0 / 180.0; var x = bd_lng - 0.0065; var y = bd_lat - 0.006; var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI); var theta = Math.atan2(y, x)
2021-05-07 09:25:54
401
原创 apicloud记录代码
let apiUrl = { // 请求路由}var url = ''; //服务器地址var apiName = '/api/'; //请求路由前缀var baseUrl = ''; //七牛云的服务器地址let count = 60;function getQueryVariable(variable) { var query = window.location.search.substring(1); var vars = query.split("&");
2021-04-12 18:16:27
306
原创 记录flutter中遇到的一些问题
1、无法加载http图片找到这个地方加上这么一段话标识让app可以使用明文通讯android:usesCleartextTraffic="true"
2021-04-09 16:36:44
194
原创 apicloud选择表情
vant记录代码<!DOCTYPE html><!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,width=device-width,initial-scale=1.0,user-scalable=no" />
2021-04-07 20:15:45
176
原创 flutter在vscode中运行
1、安装flutter插件2、安装好后重启 、链接真机、usb调试打开3、在上面的菜单里找到查看->命令面板->Flutter:Select Device查找可以链接的设备4、如果在命令行中运行flutter run、如果报错的把数据线重新查一下5、如果要在模拟器上运行这里是夜神模拟器切换到bin目录中执行nox_adb.exe connect 127.0.0.1:62001然后重复执行第三和第四步...
2021-04-07 16:22:36
875
1
原创 混合app获取Android和ios软键盘的高度
用的apicloud 其他的混合应该也能用找了很多乱七八糟的资料 可以确定是没有公开的api让我获取软键盘高度东拼西凑出来了下面的东西 可以用的 效果不错这个就是 输入框 <textarea ref="textarea" id="textarea" @focus="focus" @click="emojiShow = false" placeholder="说点什么吧..." v-model="content" id="textarea"
2021-04-06 18:46:45
535
原创 react使用
创建组件的三种方法 // 函数创建的组件 function component(){ return ( <div>组件1</div> ) } // 没有 关于 this 的操作 不需要加载对象 性能高 // es5 创建 let component = React.createClass({ defaultProps: { //组件默认的props对象 initialValue: '' }, // 设置 init
2021-03-05 15:11:09
76
原创 阿里云部署运行express
一、环境配置nodejs下载与安装（1）创建目录首先进入usr目录创建一个tools文件夹cd /usr && mkdir tools && cd tools（2）下载nodejs压缩包使用wget命令下载wget https://nodejs.org/dist/v12.19.0/node-v12.19.0-linux-x64.tar.xz（3）解压安装分别输入命令解压：xz -d node-v12.19.0-linux-x64.tar.xztar -x
2021-02-19 15:24:48
655
1
原创 vue中.sync描述符
sync是语法糖 :title.sync 有两步 1:title="title" 2 @update:title="val => title = val"方便子组件修改父组件的属性<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title></head><body> <div id..
2021-02-06 16:27:58
106
原创 java中关于hash、tree、Map、set
hash、tree、Map、setHashMapTreeMapHashSetTreeSet是java中的几种class他们只要通过哈希算法实现HashMap 中用的了 ArrayList（数组）和 LinkedList（链表）组合进行实现的当往hashmap中放入数据时 会通过 哈希算法 （key.hashCode()%16） 去决定放到那个一位数组上面 如果 （key.hashCode()%16）和之前的其他数据相同就会使用LinkedList 把他们在这个位置链接起来 然后当下次使用这个
2021-01-19 14:55:48
240
原创 js冒泡、选择、插入排序
var arr = [1, 2, 458, 6, 7, 5, 1, 111113, 5] var temp = null; // 冒泡 通过 前一个和后一个不断比较 每一次比较完之后放到最后的都是最大的 然后从头开始下一轮比较 // for(let i = 0;i < arr.length;i++){ // for(let j = 0;j < arr.length - i;j++){ // ..
2021-01-08 17:41:24
67
原创 二进制运算
二进制有原码 反码 和补码计算机中在运算时使用的都是补码btye 类型 （-128）- （127）btye类型在java中站一个字节 一个字节=8位（bit）计算机只能存储0和11111 1111当全部存满时算出来是255如果只是这样的话负数怎么表述 如果上述的 1111 1111 的十进制是255的话显然没有地方可以标识符号了所以计算机中规定 1开头是负数 1111 1111 实际上是 -127正数127的二进制是 0111 1111 当 0111 1111 和 0000 0001相加
2021-01-05 09:57:34
646
转载 css水球效果
原理：这个效果在网上挺常见的，所以我也写篇文章记录记录。原理是比较简单的，大致上就是有一个背景色为蓝色的圆形；然后圆形上面有一个或两个有弧度的白色方形盒子在旋转，通过白色遮住蓝色形成像是波浪的视差。实现：1.定义两盒子，quan就是那个圆形，shui就是圆里蓝色的背景；<div class="quan"> <div class="shui"></div> </div>2.基本样式，这样大致上就是得到一个蓝色背景的圆，细节就不说
2021-01-04 14:07:14
425
2
转载 js中封装常用的方法
/** * 表格时间格式化 */export function formatDate(cellValue) { if (cellValue == null || cellValue == "") return ""; var date = new Date(cellValue) var year = date.getFullYear() var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : da
2020-12-23 10:02:53
368
原创 微信小程序picker实时获取今明两天所有时间段选择
util.jsexport function dataFormat(fmt) { //author: meizz // Format('yyyy-MM-dd HH:mm:ss') var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "H+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "
2020-12-19 18:16:24
438
2
原创 前端转化视频链接
function urlToBlob(the_url, callback) { let xhr = new XMLHttpRequest(); xhr.open("get", the_url, true); xhr.responseType = "blob"; xhr.onload = function() { if (this.status == 200) { if (callback.
2020-12-08 15:57:12
806
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人