-
在HTML5 canvas里用卷积核进行图像处理的方法
所属栏目:[MySql教程] 日期:2020-05-12 热度:189
就跳过一些用专业属于描述专业术语看完懵逼的解释了, 语文成绩很差的我尝试从字面解释什么是卷积... 卷,理解成一种压缩;积,乘积,积累; 卷积需要一个卷积核,通常是3x3或5x5的方阵, 例如这样 // 一个3x3卷积核 0 0 0 0 1 0 0 0 0 我们要怎么用卷积核[详细]
-
HTML5 拖拽批量上传文件的示例代码
所属栏目:[MySql教程] 日期:2020-05-12 热度:160
该组件基于 Vue.js 实现,UI 框架是 elementUI,完整的 demo 地址在https://github.com/Msxiaoma/upload-folder. 拖拽上传文件夹(仅仅chrome支持) 一、组件描述 同时拖拽多个文件夹 删除指定文件夹 显示当前文件夹的上传进度条 超过5M的文件夹分片上传 效果[详细]
-
html5调用摄像头功能的实现代码
所属栏目:[MySql教程] 日期:2020-05-12 热度:182
前些天,线上笔试的时候,发现需要浏览器同意开启摄像头,感觉像是 js 调用的,由于当时笔试,也就没想到这么多问题。今天闲来无事,看了下自己的 todo,发现有这个调用摄像头的todo,才想到。网上查了一下,果然 js 有调用摄像头的 api,为此自己写一个 d[详细]
-
简单聊聊H5的pushState与replaceState的用法
所属栏目:[MySql教程] 日期:2020-05-12 热度:51
HTML5引入了 和 方法,它们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate 配合使用。 二、pushState() 方法的例子 假设在 中执行了以下 JavaScript 代码: var stateObj = { foo: bar };history.pushState(stateObj, page 2, bar.html)[详细]
-
Html5 localStorage入门教程
所属栏目:[MySql教程] 日期:2020-05-12 热度:173
只读的 localStorage 允许你访问一个 Document 的远端(origin)对象 Storage;数据存储为跨浏览器会话。localStorage 类似于 sessionStorage,区别在于,数据存储在 localStorage 是无期限的,而数据存储在 sessionStorage 会被清除,当页面会话结束时也[详细]
-
利用html5 canvas动态画饼状图的示例代码
所属栏目:[MySql教程] 日期:2020-05-12 热度:104
这里并没引用jquery等第三方库,只是用dom操作和canvas的特性编写的。 canvas画圆大体分为实心圆和空心圆。 根据需求分析知道该圆为实心圆。 1.先用canvas画实心圆 //伪代码var canvas = document.createElement(canvas);var ctx = canvas.getContext('2d'[详细]
-
如何使用localstorage代替cookie实现跨域共享数据问题
所属栏目:[MySql教程] 日期:2020-05-12 热度:157
因为网站系统的日益庞大,不同域名业务,甚至不同合作方网站的cookie可能或多或少需要进行共享使用,遇到这个情况的时候,大家一般想到的是使用登录中心分发cookie状态再进行同步进行解决,成本较高而且实施起来比较复杂和麻烦。 因为cookie在跨域的情况下[详细]
-
探究 canvas 绘图中撤销(undo)功能的实现方式详解
所属栏目:[MySql教程] 日期:2020-05-12 热度:53
最近在做网页版图片处理相关的项目,也算是初入了 canvas 的坑。项目需求中有一个给图片添加水印的功能。我们知道,在浏览器端实现图片添加水印功能,通常的做法就是使用 canvas 的 drawImage 方法。对于普通的合成(比如一张底图和一张 PNG 水印图片合成[详细]
-
详解canvas在圆弧周围绘制文本的两种写法
所属栏目:[MySql教程] 日期:2020-05-12 热度:184
教程是直接按弧度进行编写的 自己又试着用角度重新编写了一份,有些差别,总结起来还是用弧度比较方便,当然两种哪种理解的容易可以自行斟酌 写代码有时候不一定要按照教程一板一眼的写,最佳实践固然是好,但是自己尝试些别的也许有些别的收获不是么~ 效[详细]
-
HTML5中的网络存储实现方式
所属栏目:[MySql教程] 日期:2020-05-12 热度:162
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变得越来越复杂,为了满足日益更新的需求,会经常性的在本地设备上存储数据,例如记录历史活动信息。传统方式使用document.cookie来进行存储,但是由于其存储的空间只有4KB左右,并且需要复杂的操[详细]
-
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
所属栏目:[MySql教程] 日期:2020-05-11 热度:110
navigator.mediaDevices.getUserMedia 应项目要求,需要实现移动端app嵌入H5页面完成实人认证的功能。打开getUserMedia文档,链接如下: https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia 看上去很简单,最终却写的怀疑人生。[详细]
-
详解Html5中video标签那些属性和方法
所属栏目:[MySql教程] 日期:2020-05-11 热度:60
最近在写一个自定义播放器, 写之前我们肯定要把播放器的属性和方法全部过一遍,知彼知己,方能百战不殆嘛...后面会把自己写的播放器和踩过的一些坑也上传上来 video标签行内属性 src:视频的URL poster:视频封面,没有播放时显示的图片 preload:预加载 aut[详细]
-
关于前端上传文件全面基础扫盲贴(入门)
所属栏目:[MySql教程] 日期:2020-05-11 热度:149
为什么分章节写呢?因为覆盖的知识点比较多,也可能我力尽详细介绍,照顾下基础不好的人,温故而知新。 刚开始的确是打算一篇搞定的,写道一半发觉已经相当长篇大论了,好多人例如我一进来看到这么多内容就已经怕了,而且不是每个人都需要了解全部内容,于[详细]
-
HTML5之多线程(Web Worker)
所属栏目:[MySql教程] 日期:2020-05-11 热度:80
提到 HTML5 总是让人津津乐道,太多的特性和有趣的 API 让人耳目一新。但是很多童鞋还停留在语义化的阶段,忽视了 HTML5 的强劲之处。 这节我们来探讨一下多线程 Web-Worker。 一、明确 JavaScript 是单线程 JavaScript 语言的一大特点就是单线程,也就是[详细]
-
把富文本的回车转为br标签
所属栏目:[MySql教程] 日期:2020-05-11 热度:123
例如:我家孩子在SayABC小班课跟小伙伴们一起互帮互助,合作竞争,学习更加有动力!从简单的单词到句型和场景对话,孩子越来越敢于开口说英语啦![耶]扫码立即领取外教课[爱心]让孩子从小与世界接轨~ 需要转为才能被html识别,并且换行。可以这样做。 是回[详细]
-
HTML5 WebGL 实现民航客机飞行监控系统
所属栏目:[MySql教程] 日期:2020-05-11 热度:51
前些日子出差,在飞机上看到头顶的监控面板,除了播放电视剧和广告之外,还会时不时的切换到一个飞机航行的监控系统,不过整个监控系统让人感到有一点点的简陋,所以我就突发奇想制作了一个采用 HT for Web 的升级版监控系统,demo 的效果还行,发出来大家[详细]
-
基于Canvas+Vue的弹幕组件的实现
所属栏目:[MySql教程] 日期:2020-05-11 热度:106
最近由于项目需要定制化一个弹幕功能,所以尝试使用canvas来开发组件。经过测试在一些低端机的效果也没有明显的卡顿,和大家交流一下 弹幕效果 功能介绍 支持循环弹幕 弹幕不重叠 支持选择轨道数 支持弹幕发送 使用 npm i vue-barrage 参数配置 nametypede[详细]
-
浅谈cookie和localStorage那些事
所属栏目:[MySql教程] 日期:2020-05-11 热度:138
一、localStorage、cookie、sessionStorage的区别与练习 1、cookie 小甜饼。它的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到记住密码,这通常就是通过在Cookie中[详细]
-
HTML5实时语音通话聊天MP3压缩传输3KB每秒
所属栏目:[MySql教程] 日期:2020-05-11 热度:170
自从Recorder H5 GitHub开源库优化后,对边录边转码成小语音片段文件实时上传服务器这种操作支持非常良好,因此以前不太好支持的H5语音通话已经有了更好的突破空间。因此花了两晚时间打造了一个H5语音通话聊天的demo。 欢迎在线把玩: https://xiangyuecn.[详细]
-
详解通过变换矩阵实现canvas的缩放功能
所属栏目:[MySql教程] 日期:2020-05-11 热度:141
这篇文章主要介绍一种通过设置canvas的变换矩阵来实现canvas的缩放。 第一步就是监听鼠标的滚轮事件,在滚轮事件中根据鼠标的滚动以及基于前一次的变换,重新设置context的缩放和平移,核心代码如下: let delta = this.deltaInst; delta.bind('zoom', (da[详细]
-
canvas绘制文本内容自动换行的实现代码
所属栏目:[MySql教程] 日期:2020-05-11 热度:118
要求制作一个邀请卡页面,其中标题字数是动态的,最多可显示2行,如果超出2行则第2行内容结尾添加省略号。根据产品妹子的性格,四行这个设置到时很大机会改,所以这里一定不能写死,结果前几天真的要求改成了最多可显示4行 ,其他照旧。产品妹子too young[详细]
-
浅谈pc和移动端的响应式的使用
所属栏目:[MySql教程] 日期:2020-05-11 热度:83
身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题?下面我们来说一下: 1.响应式跟自适应有什么区别? 有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的. 自适应是最早出现的,后面才有了响应式。响应式布局等于流动网[详细]
-
html Table 表头固定的实现
所属栏目:[MySql教程] 日期:2020-05-11 热度:167
div class=wrapboxdiv class=table-headtabletheadth width=10%合同号/thth width=30%签约客户/thth width=20%发布客户/thth width=10%合同状态/thth width=30%选定条件的发布周期额度/th/thead/table/divdiv class=table-bodytabletbody id=tbody/tbody/t[详细]
-
Html5如何唤起百度地图App的方法
所属栏目:[MySql教程] 日期:2020-05-11 热度:163
最近接手了一个需求,要求混合式开发,前端做好 h5 后将页面嵌入到 ios 和 android 中,需要用到百度地图的地图导航。具体功能点如下: 如果手机端(ios, android)安装了百度地图,点击导航按钮,唤起百度地图 app 否则,打开 web 端百度地图导航 需要用[详细]
-
canvas学习笔记之绘制简单路径
所属栏目:[MySql教程] 日期:2020-05-11 热度:189
绘制线段一般步骤: moveTo(x,y) 移动画笔到指定的坐标点(x,y) lineTo(x,y) 使用直线连接当前端点和指定的坐标点(x,y) stroke() 根据当前的画线样式,绘制当前或已经存在的路径 2 矩形路径 绘制矩形路径一般步骤: rect(x, y, width, height) 矩形路径,坐标[详细]