-
在HTML5 canvas里用卷积核进行图像处理的方法
所属栏目:[建站] 日期:2020-05-12 热度:161
就跳过一些用专业属于描述专业术语看完懵逼的解释了, 语文成绩很差的我尝试从字面解释什么是卷积... 卷,理解成一种压缩;积,乘积,积累; 卷积需要一个卷积核,通常是3x3或5x5的方阵, 例如这样 // 一个3x3卷积核 0 0 0 0 1 0 0 0 0 我们要怎么用卷积核[详细]
-
HTML5新增的标签和属性归纳总结
所属栏目:[建站] 日期:2020-05-12 热度:150
收集总结的HTML5的新特性,基本除了IE9以下都可以使用。 HTML5语法 大部分延续了html的语法不同之处:开头的 !DOCTYPE html html lang=zh-CNmeta charset=utf-8 字符编码变得简洁, 不区分大小写, 添加了布尔值,类似checked,selected 引号可以省略,但[详细]
-
HTML5 video视频字幕的使用和制作方法
所属栏目:[建站] 日期:2020-05-12 热度:113
HTML5允许我们使用 元素为视频指定字幕。这个元素的各种属性允许我们指定这样的东西,比如我们添加的内容的类型,它所在的语言,当然还有对包含实际字幕信息的文本文件的引用。 video id=video controlssource src=http://www.jb51.net/html5/./step.mp4 t[详细]
-
使用html2canvas实现浏览器截图的示例代码
所属栏目:[建站] 日期:2020-05-12 热度:155
使用html2canvas实现浏览器截图,必须在服务器环境下才能实现。 作用 html2canvas可以通过纯JS对浏览器端经行截屏,但截图的精确度还有待提高,部分css不可识别,所以在canvas中不能完美呈现原画面样式 /*多行溢出省略就不行,只能超出隐藏了*/.book_inf{po[详细]
-
详解HTML5 canvas绘图基本使用方法
所属栏目:[建站] 日期:2020-05-12 热度:176
副标题#e# canvas/canvas是HTML5中新增的标签,用于绘制图形,实际上,这个标签和其他的标签一样,其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象,我们可以通过JavaScript脚本来控制该对象进行绘图。 canvas/canvas只是一个绘制图形的容器[详细]
-
详解Html5 Canvas画线有毛边解决方法
所属栏目:[建站] 日期:2020-05-12 热度:170
Html5 Canvas 所有的画线指令画出来的线条都有毛边(比如 lineTo, arcTo,strokeRect),这是因为在Canvas中整数坐标值对应的位置恰巧是屏幕象素点中间的夹缝,那么当按这样的坐标进行线条渲染时所要用到的就是夹缝两边的象素点,这样即便设置了lineWidth[详细]
-
详解移动端HTML5音频与视频问题及解决方案
所属栏目:[建站] 日期:2020-05-12 热度:84
最近在研究用视频代替动画,用视频代替精灵动画,我们称这种视频叫做交互视频。 传统的精灵动画: 磁盘空间大,下载慢,尤其是在线播放,会更慢 文件太多,在线播放的时候,太多http请求,会导致响应慢,或者行为失常 因此,急需开发了一套技术,用视频代[详细]
-
HTML5 Canvas图像模糊完美解决办法
所属栏目:[建站] 日期:2020-05-12 热度:130
1、最近在用h5的canvas画动画,发现图像特别模糊。后来终于找到罪魁祸首是meta name=viewport content=width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no /这个代码,因为这行代码进行了伸缩 2、模糊图像的效果: 3、[详细]
-
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
所属栏目:[建站] 日期:2020-05-12 热度:151
副标题#e# 没有最好,只有更好,如题所示,这篇文章只要是分享一个用 Canvas 来实现的粒子运动效果。感觉有点标题党了,但换个角度,勉勉强强算是炫丽吧,虽然色彩上与炫丽无关,但运动效果上还是算得上有点点炫的。不管怎么样,我们还是开始这个所谓的炫丽[详细]
-
基于 HTML5 Canvas实现 的交互式地铁线路图
所属栏目:[建站] 日期:2020-05-12 热度:51
副标题#e# 前两天在 echarts 上寻找灵感的时候,看到了很多有关地图类似的例子,地图定位等等,但是好像就是没有地铁线路图,就自己花了一些时间捣鼓出来了这个交互式地铁线路图的 Demo,地铁线路上的点是在网上随便下载了一个,这篇文章记录自己的一些收获[详细]
-
利用html5 file api读取本地文件示例(如图片、PDF等)
所属栏目:[建站] 日期:2020-05-12 热度:52
在html4的年代,我们如果要在网页上呈现一张用户本地的图片,需要用户先把图片上传到服务器,再根据服务器提供的图片地址把图片下载下来,才能把图片在网页上呈现出来。这一来二往,起码已经费了两倍于这张图片的流量了,更别说服务器为了存储这张图片所花[详细]
-
canvas实现图片马赛克的示例代码
所属栏目:[建站] 日期:2020-05-12 热度:98
1. 原生canvas实现用到的API 1) getContext(contextID) ---返回一个用于在画布上绘图的环境 复制代码 代码如下: Canvas.getContext('2d') // 返回一个 CanvasRenderingContext2D 对象,使用它可以绘制到 Canvas 元素中 2)drawImage drawImage(imgObj, x,[详细]
-
html5 分层屏幕适配的方法
所属栏目:[建站] 日期:2020-05-12 热度:50
副标题#e# 设计大大,这次真的是 按设计稿来 了,因为现在,任何机子都是设计稿标准机! 开发同学,这下你就直接读设计稿标注就好了啦! 屏幕适配 屏幕适配应当指内容 适配区 和 屏幕区 间的适配关系。 单屏适配有 contain、cover 或 fill,多屏常见是 依宽[详细]
-
把富文本的回车转为br标签
所属栏目:[建站] 日期:2020-05-12 热度:187
例如:我家孩子在SayABC小班课跟小伙伴们一起互帮互助,合作竞争,学习更加有动力!从简单的单词到句型和场景对话,孩子越来越敢于开口说英语啦![耶]扫码立即领取外教课[爱心]让孩子从小与世界接轨~ 需要转为才能被html识别,并且换行。可以这样做。 是回[详细]
-
HTML5之多线程(Web Worker)
所属栏目:[建站] 日期:2020-05-12 热度:128
提到 HTML5 总是让人津津乐道,太多的特性和有趣的 API 让人耳目一新。但是很多童鞋还停留在语义化的阶段,忽视了 HTML5 的强劲之处。 这节我们来探讨一下多线程 Web-Worker。 一、明确 JavaScript 是单线程 JavaScript 语言的一大特点就是单线程,也就是[详细]
-
关于前端上传文件全面基础扫盲贴(入门)
所属栏目:[建站] 日期:2020-05-12 热度:122
副标题#e# 为什么分章节写呢?因为覆盖的知识点比较多,也可能我力尽详细介绍,照顾下基础不好的人,温故而知新。 刚开始的确是打算一篇搞定的,写道一半发觉已经相当长篇大论了,好多人例如我一进来看到这么多内容就已经怕了,而且不是每个人都需要了解全[详细]
-
详解Html5中video标签那些属性和方法
所属栏目:[建站] 日期:2020-05-12 热度:194
最近在写一个自定义播放器, 写之前我们肯定要把播放器的属性和方法全部过一遍,知彼知己,方能百战不殆嘛...后面会把自己写的播放器和踩过的一些坑也上传上来 video标签行内属性 src:视频的URL poster:视频封面,没有播放时显示的图片 preload:预加载 aut[详细]
-
HTML5通过navigator.mediaDevices.getUserMedia调用手机摄像头问题
所属栏目:[建站] 日期:2020-05-12 热度:142
副标题#e# navigator.mediaDevices.getUserMedia 应项目要求,需要实现移动端app嵌入H5页面完成实人认证的功能。打开getUserMedia文档,链接如下: https://developer.mozilla.org/zh-CN/docs/Web/API/MediaDevices/getUserMedia 看上去很简单,最终却写的[详细]
-
HTML5中的网络存储实现方式
所属栏目:[建站] 日期:2020-05-12 热度:76
随着互联网的快速发展,基于网页的应用越来越普遍,同时也变得越来越复杂,为了满足日益更新的需求,会经常性的在本地设备上存储数据,例如记录历史活动信息。传统方式使用document.cookie来进行存储,但是由于其存储的空间只有4KB左右,并且需要复杂的操[详细]
-
H5离线存储Manifest原理及使用
所属栏目:[建站] 日期:2020-05-12 热度:82
离线存储可以将站点的文件储存在本地,在没有网络的情况下还是可以访问到存储的对应的站点的页面,这些文件可以包括html,js,css,img等等文件。但其实即使在有网络的时候,浏览器也会优先使用已离线存储的文件。 什么是Manifest: Manifest是一个简单的[详细]
-
完全模块化笔记本上架 啥都能换售价1300美元
所属栏目:[建站] 日期:2020-05-12 热度:62
很多朋友在购买笔记本的时候,还是比较看重升级性,比如内存是否支持升级、是否可以增加硬盘。不过随着笔记本越来越轻薄,很多笔记本只支持更换硬盘。不过一款终极可升级的笔记本出来了,其采用模块化设计,什么都能升级,它就是MNT Reform。 苹果MacBook[详细]
-
MPEG-5 EVC编码落地 比H.265更出色
所属栏目:[建站] 日期:2020-05-12 热度:184
编码标准迭代对于数字视频发展有着极大的影响。随着H.264编码临近尾声,H.265编码近年来被广泛应用于4K、HDR(高动态范围)、WCG视频(宽色域)等领域,不过,相对于H.265编码来说,MPEG-5或许在未来的4K、8K领域更有作为。 MPEG-5 EVC是继1993年的MPEG-1[详细]
-
HTML5移动端开发遇见的东西
所属栏目:[建站] 日期:2020-05-12 热度:151
副标题#e# !-- 有# *符号输入 --input type=tel!-- 纯数字 --input pattern=d* 安卓跟IOS的表现形式应该不一样,大家可以自己试试。当运用了正则pattern后,就不用关注input的类型了。 2. 调用系统的某些功能 !-- 拨号 --a href=http://www.jb51.net/html5[详细]
-
详解通过变换矩阵实现canvas的缩放功能
所属栏目:[建站] 日期:2020-05-12 热度:104
这篇文章主要介绍一种通过设置canvas的变换矩阵来实现canvas的缩放。 第一步就是监听鼠标的滚轮事件,在滚轮事件中根据鼠标的滚动以及基于前一次的变换,重新设置context的缩放和平移,核心代码如下: let delta = this.deltaInst; delta.bind('zoom', (da[详细]
-
HTML5实时语音通话聊天MP3压缩传输3KB每秒
所属栏目:[建站] 日期:2020-05-12 热度:177
自从Recorder H5 GitHub开源库优化后,对边录边转码成小语音片段文件实时上传服务器这种操作支持非常良好,因此以前不太好支持的H5语音通话已经有了更好的突破空间。因此花了两晚时间打造了一个H5语音通话聊天的demo。 欢迎在线把玩: https://xiangyuecn.[详细]