-
详解移动端HTML5音频与视频问题及解决方案
所属栏目:[MySql教程] 日期:2020-05-12 热度:190
最近在研究用视频代替动画,用视频代替精灵动画,我们称这种视频叫做交互视频。 传统的精灵动画: 磁盘空间大,下载慢,尤其是在线播放,会更慢 文件太多,在线播放的时候,太多http请求,会导致响应慢,或者行为失常 因此,急需开发了一套技术,用视频代[详细]
-
详解Html5 Canvas画线有毛边解决方法
所属栏目:[MySql教程] 日期:2020-05-12 热度:68
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按这样的坐标进行线条渲染时所要用到的就是夹缝两边的象素点,这样即便设置了lineWidth[详细]
-
详解HTML5 canvas绘图基本使用方法
所属栏目:[MySql教程] 日期:2020-05-12 热度:122
副标题#e# canvas/canvas是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控制该对象进行绘图。 canvas/canvas只是一个绘制图形的容器[详细]
-
HTML5 video视频字幕的使用和制作方法
所属栏目:[MySql教程] 日期:2020-05-12 热度:129
HTML5允许我们使用 元素为视频指定字幕。这个元素的各种属性允许我们指定这样的东西,比如我们添加的内容的类型,它所在的语言,当然还有对包含实际字幕信息的文本文件的引用。 video id=video controlssource src=http://www.jb51.net/html5/./step.mp4 t[详细]
-
HTML5新增的标签和属性归纳总结
所属栏目:[MySql教程] 日期:2020-05-12 热度:193
收集总结的HTML5的新特性,基本除了IE9以下都可以使用。 HTML5语法 大部分延续了html的语法不同之处:开头的 !DOCTYPE html html lang=zh-CNmeta charset=utf-8 字符编码变得简洁, 不区分大小写, 添加了布尔值,类似checked,selected 引号可以省略,但[详细]
-
在HTML5 canvas里用卷积核进行图像处理的方法
所属栏目:[MySql教程] 日期:2020-05-12 热度:188
就跳过一些用专业属于描述专业术语看完懵逼的解释了, 语文成绩很差的我尝试从字面解释什么是卷积... 卷,理解成一种压缩;积,乘积,积累; 卷积需要一个卷积核,通常是3x3或5x5的方阵, 例如这样 // 一个3x3卷积核 0 0 0 0 1 0 0 0 0 我们要怎么用卷积核[详细]
-
HTML5 拖拽批量上传文件的示例代码
所属栏目:[MySql教程] 日期:2020-05-12 热度:97
该组件基于 Vue.js 实现,UI 框架是 elementUI,完整的 demo 地址在https://github.com/Msxiaoma/upload-folder. 拖拽上传文件夹(仅仅chrome支持) 一、组件描述 同时拖拽多个文件夹 删除指定文件夹 显示当前文件夹的上传进度条 超过5M的文件夹分片上传 效果[详细]
-
html5调用摄像头功能的实现代码
所属栏目:[MySql教程] 日期:2020-05-12 热度:90
副标题#e# 前些天,线上笔试的时候,发现需要浏览器同意开启摄像头,感觉像是 js 调用的,由于当时笔试,也就没想到这么多问题。今天闲来无事,看了下自己的 todo,发现有这个调用摄像头的todo,才想到。网上查了一下,果然 js 有调用摄像头的 api,为此自[详细]
-
简单聊聊H5的pushState与replaceState的用法
所属栏目:[MySql教程] 日期:2020-05-12 热度:62
HTML5引入了 和 方法,它们分别可以添加和修改历史记录条目。这些方法通常与window.onpopstate 配合使用。 二、pushState() 方法的例子 假设在 中执行了以下 JavaScript 代码: var stateObj = { foo: bar };history.pushState(stateObj, page 2, bar.html)[详细]
-
Html5 localStorage入门教程
所属栏目:[MySql教程] 日期:2020-05-12 热度:81
只读的 localStorage 允许你访问一个 Document 的远端(origin)对象 Storage;数据存储为跨浏览器会话。localStorage 类似于 sessionStorage,区别在于,数据存储在 localStorage 是无期限的,而数据存储在 sessionStorage 会被清除,当页面会话结束时也[详细]
-
利用html5 canvas动态画饼状图的示例代码
所属栏目:[MySql教程] 日期:2020-05-12 热度:123
这里并没引用jquery等第三方库,只是用dom操作和canvas的特性编写的。 canvas画圆大体分为实心圆和空心圆。 根据需求分析知道该圆为实心圆。 1.先用canvas画实心圆 //伪代码var canvas = document.createElement(canvas);var ctx = canvas.getContext('2d'[详细]
-
如何使用localstorage代替cookie实现跨域共享数据问题
所属栏目:[MySql教程] 日期:2020-05-12 热度:85
副标题#e# 因为网站系统的日益庞大,不同域名业务,甚至不同合作方网站的cookie可能或多或少需要进行共享使用,遇到这个情况的时候,大家一般想到的是使用登录中心分发cookie状态再进行同步进行解决,成本较高而且实施起来比较复杂和麻烦。 因为cookie在跨[详细]
-
探究 canvas 绘图中撤销(undo)功能的实现方式详解
所属栏目:[MySql教程] 日期:2020-05-12 热度:107
副标题#e# 最近在做网页版图片处理相关的项目,也算是初入了 canvas 的坑。项目需求中有一个给图片添加水印的功能。我们知道,在浏览器端实现图片添加水印功能,通常的做法就是使用 canvas 的 drawImage 方法。对于普通的合成(比如一张底图和一张 PNG 水印[详细]
-
详解canvas在圆弧周围绘制文本的两种写法
所属栏目:[MySql教程] 日期:2020-05-12 热度:188
教程是直接按弧度进行编写的 自己又试着用角度重新编写了一份,有些差别,总结起来还是用弧度比较方便,当然两种哪种理解的容易可以自行斟酌 写代码有时候不一定要按照教程一板一眼的写,最佳实践固然是好,但是自己尝试些别的也许有些别的收获不是么~ 效[详细]
-
canvas绘制文本内容自动换行的实现代码
所属栏目:[MySql教程] 日期:2020-05-11 热度:179
要求制作一个邀请卡页面,其中标题字数是动态的,最多可显示2行,如果超出2行则第2行内容结尾添加省略号。根据产品妹子的性格,四行这个设置到时很大机会改,所以这里一定不能写死,结果前几天真的要求改成了最多可显示4行 ,其他照旧。产品妹子too young[详细]
-
浅谈pc和移动端的响应式的使用
所属栏目:[MySql教程] 日期:2020-05-11 热度:190
身为一个前端攻城狮,是不是经常遇到各种各样的响应式问题?下面我们来说一下: 1.响应式跟自适应有什么区别? 有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的. 自适应是最早出现的,后面才有了响应式。响应式布局等于流动网[详细]
-
html Table 表头固定的实现
所属栏目:[MySql教程] 日期:2020-05-11 热度:103
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 热度:168
最近接手了一个需求,要求混合式开发,前端做好 h5 后将页面嵌入到 ios 和 android 中,需要用到百度地图的地图导航。具体功能点如下: 如果手机端(ios, android)安装了百度地图,点击导航按钮,唤起百度地图 app 否则,打开 web 端百度地图导航 需要用[详细]
-
canvas学习笔记之绘制简单路径
所属栏目:[MySql教程] 日期:2020-05-11 热度:153
绘制线段一般步骤: moveTo(x,y) 移动画笔到指定的坐标点(x,y) lineTo(x,y) 使用直线连接当前端点和指定的坐标点(x,y) stroke() 根据当前的画线样式,绘制当前或已经存在的路径 2 矩形路径 绘制矩形路径一般步骤: rect(x, y, width, height) 矩形路径,坐标[详细]
-
canvas实现圆绘制的示例代码
所属栏目:[MySql教程] 日期:2020-05-11 热度:71
语法:arc(x, y, radius, startAngle, endAngle, anticlockwise) 前面两个参数是x坐标,y坐标,第三个参数是半径,第四个参数是开始的弧度,第五个参数是结束的弧度,第六个参数是顺时针还是逆时针,默认是顺时针。 看下面代码,这样就能绘制一个圆了。 ct[详细]
-
Html5 Canvas 实现一个“刮刮乐”游戏
所属栏目:[MySql教程] 日期:2020-05-11 热度:95
副标题#e# 话不多说,先上Demo 和 项目源码 . 2. 实现 我们创建一个 ScrapAward 类,通过传入 option 和调用其 restart() 方法实现重新开始。 (1)定义 option 参数及 ScrapAward 结构 class ScrapAward {constructor(userOption) {this.option = {canvasI[详细]
-
详解基于 Canvas 手撸一个六边形能力图
所属栏目:[MySql教程] 日期:2020-05-11 热度:59
副标题#e# 六边形能力图如下,由 6 个 六边形组成,每一个顶点代表其在某一方面的能力。这篇文章我们就来看看如何基于 canvas 去绘制这么一个六边形能力图。当然,你也可以基于其他开源的 js 方案来实现,如 EChars.js 等。 二、六边形绘制基础 六边形能力[详细]
-
html+css实现自定义图片上传按钮功能
所属栏目:[MySql教程] 日期:2020-05-11 热度:132
普通的input[type=file]的效果很朴素 可以自定义一个file选择文件的按钮: 思路为: 用定位将自定义的按钮遮住原来的选择文件按钮, 再让点击自定义按钮时触发原来的选择文件按钮的事件即可 (对此,label可实现) eg: html: css样式: 结果图: 点击选择[详细]
-
分享一个页面平滑滚动小技巧(推荐)
所属栏目:[MySql教程] 日期:2020-05-11 热度:64
今天写需求的时候发现一个小的优化点:用户选择了一些数据之后, 对应列表中的数据需要高亮, 有时候列表很长, 为了提升用户体验,需要加个滚动, 自动滚动到目标位置。 简单的处理了一下, 问题顺利解决, 就把这个小技巧分享一下给大家。 正文 有几种不[详细]
-
web页面录屏实现
所属栏目:[MySql教程] 日期:2020-05-11 热度:79
副标题#e# 在看到评论后,突然意识到自己没有提前说明,本文可以说是一篇调研学习文,是我自己感觉可行的一套方案,后续会去读读已经开源的一些类似的代码库,补足自己遗漏的一些细节,所以大家可以当作学习文,生产环境慎用。 录屏重现错误场景 如果你的应[详细]