前言 HTML中新添加了许多新的事件，但由于兼容性的问题,许多事件都没有广泛的应用，接下来为大家介绍一些好用的移动端触摸事件: touchstart、touchmove、touchend。 介绍 下面我们来简单介...

内容区块是指将HTML页面按逻辑分割后的单位。对于页面网站来说，导航菜单、文章正文、文章的评论等每一个部分都可称为内容区块。 article元素 article元素代表文档、页面或应用程序...

做视频直播这一块，前期研究了很多方案，包括websocket，因为各种原因最后没有采取这个方案，但还是想记录一下学习的心得。 WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双...

以前做pc端，也会遇到兼容性的问题，不过说实话，脑海里全是ie的问题，并没有什么可特别注意的，可能是我不善总结，现在做移动端（本来觉得移动端很easy，所以没放在眼里），s...

吸顶功能 吸顶是一种比较常见的交互效果，当页面滑出屏幕边界，标题会自动吸附在屏幕边缘，用于提示用户。 基本原理 在H5中实现的基本原理就是判断当前页面滑动的距离scrollTop和...

一、作用 离线浏览 - 根据文件规则把资源缓存在本地，脱机依然能够访问资源，联网会直接使用缓存在本地的文件。优化加载速度，节约服务器资源。 二、适用场景 正如 manifest 英译的...

现在很多的 APP中会嵌套HTML5的页面，比如经常变化的等等，有一部分页面需要原生Java与HTML5中的js进行交互操作，下面介绍一下android中HTML5的使用： 1、关于HTML5种cookie 网页中可能会用到...

最近学习到了一种关于canvas的骨骼动画，听这个名字就知道他和canvas之前的动画不同，不知道你有没有兴趣了解一下呢？ 关于骨骼动画最初是无意间在腾讯团队上看到的，但是由于他官...

说明 我用echars很久了，如果出现如上图所示样式的饼图，我用echarts很难实现，官方给的文档没有这种模式的饼图。试过用d3和canvas分别画饼图，因为本人对canvas比较熟悉和d3还要引入插...

起因 今天在学习《HTML5+Javascript动画基础》这本书的时候，在第八章的第三节讲到如何用三个弹簧连接三个点来做拉伸运动。 在做完例子之后，就想到如果是四个点，五个点，怎么样。...

本文介绍了canvas环形倒计时组件的示例代码，分享给大家，具体如下： 效果如下图一： Canvas环形倒计时组件 Canvas环形倒计时是基于Canvas实现的倒计时，建议于移动端使用 Canvas环形倒计...

问题描述 发现写的h5页面在手机端可以向右滑动，导致样式出现问题～ 问题排查 原因一：没有进行移动端适配 在html头部添加以下内容： meta name=viewport content=width=device-width,initial-scal...

一、简介 需求： 将HTML5的内容保存为图片 思路： 通过Canvas绘图生成base64图片，长按即可保存到本地 问题： canvas禁止跨域、安卓微信长按不能保存base64图片、服务器拉取的图片被压缩...

什么是HTML5的form自动完成功能？ 首先，HTML5 中有个新属性autocomplete ，autocomplete 属性规定表单是否应该启用自动完成功能，它自动完成允许浏览器预测对字段的输入。当用户在字段开始...

前言 （最近设计模式看的有点头大，一直面对纯js实在是有些枯燥-_-。所以写一点有趣的东西调剂一下） 现在canvas已经不算新鲜了，不过由于日常业务中并不常用，所以实践并不多，今...

最近在研究canvas，简单的用canvas绘制了一下卡通人物--海绵宝宝。 图片如下： 代码如下： !DOCTYPE htmlhtml head meta charset=utf-8 / titlecanvas海绵宝宝/title /head body canvas id=canvas width=1000 height=7...

随着计算机和网络技术的飞速发展，在线签名技术越来越多的被应用在无纸化办公中，这种直观便利的操作不仅可以大幅提升办公效率，而且使用数字化存储方式，避开了传统的纸质签...

之前在一个移动端的抽奖页面中，在抽奖结果的展示窗口需要弹幕轮播显示，之前踩过一些小坑，现在总结一下前端弹幕效果的实现方式。 css3实现乞丐版的弹幕 css3弹幕性能优化 canv...

学习canvas，首先得知道如何去绘制线段，然后才能通过很多简单的线段去实现比较复杂的图形，比如常见的图表，柱状图，折线图等都是通过一段一段的线段实现的。 基础知识 canvas 的...

项目中做身份证识别时，需要传送图片的 base64 格式编码，但是手机拍摄的照片都太大了，转成 base64 简直可怕，因此找了一下解决办法 涉及到的知识点 onchange 事件是在上传完文件之后...

有个项目是，这么个情况，输入框，实时监测输入，触发请求。 第一想法是input 上的onchange()方法，试了一下，不好用，是值等更改确认了，才会触发，不即时。 上网查了一下， $(#fi...

先在页面任意区域放上这段代码 stdDeviation设置模糊量，最低0 svg style=display:none 【原URL http://www.yidunidc.com/kt.html 转载请说明出处】 filter id=blur-effect-1 feGaussianBlur stdDeviation=1/ /filter filter...

问题提出 这是一个比较老的问题了，我第一次注意到的时候，是UI设计师来找我麻烦，emmm那时候我才初入前端职场，啥也不懂啊啊啊啊啊，情形是这样的： 设计师拿着手机过来：这些...

我们都知道触发window.onstorage必须满足以下两个条件： 通过localStorage.setItem或sessionStorage.setItem保存（更新）某个storage 保存（更新）这个storage时，它的新值必须与之前的值不同 上面的第...

对于H5页面来说二次分享还是蛮重要的，毕竟qq还是微信发出去之后习惯性的使用自带的分享功能。和PC端不同，PC直接复制地址了。前两天在做请柬，踩了不少的雷，个人开发和公司开...

具体代码如下所示： !--代码如下，最下面给出了我测试用的9张250*250的图片切片--!DOCTYPE htmlhtmlhead meta charset=utf-8 titledrag拖拽/title style .box{ float: left; } img{ width: 150px; height:150px; } #puzzle{...

上个版本街道一个需求，使用url生成一个二维码，然后和另外一张图片合成一张图拍你， 实现思路是这样的 使用jr-qrcode将url生成data:base64供img使用 然后使用canvas 将两张图合成一张图片...

WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。我们使用Socket.io，它很好地封装了webSocket接口，提供了...

现在有很多微信公众号运营活动，都有生成图片的需求，生成图片后可以发送给好友和发到朋友圈扩散，利于产品的宣传！ 1.生成图片可以用canvas,但是由于已经有了html2canvas这个开源库...

简介 离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存机制，但它们并不可靠，也不一定总能起到预期的作用。HTML5 使用 ApplicationCache 接口解决了由离线带来的部分...

【文章出处:香港多ip服务器 复制请保留原URL】 本文介绍了详解html5 postMessage解决跨域通信的问题，分享给大家，具体如下： 效果图 postmessage解析HTML5提供了新型机制PostMessage实现安全的...

在这个数码产品泛滥的时代里，拍照已经成为生活不可或缺的一部分，不管是居家，踏青，还是远途旅行，总会拍一些美美的照片。但相机直接拍出来的照片往往和我们的心理预期有一...

简介 HTML5未出来之前，在线的音频和视频都是借助Flash或者第三方工具实现的，现在HTML5也支持了这方面的功能。在一个支持HTML5的浏览器中，不需要安装任何插件就能播放音频和视频。...

HTML5 Audio标签能够支持wav, mp3, ogg, acc, webm等格式，但有个很重要的音乐文件格式midi(扩展名mid)却在各大浏览器中都没有内置的支持。不是所有的浏览器都支持MP3 OGG之类的，每个浏览器因...

定义和用法 type 属性规定 input 元素的类型。 注释：该属性不是必需的，但是我们认为您应该始终使用它。 !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 meta name=viewport content=width=device-width, ini...

当一收到上传图片视频并可以动态设置视频显示的海报帧的需求时，主要想的是怎么样解析视频并获取保存每帧的图片，百度出来的大多是类似下面这种需要播放video并点击截图的，或...

先说下canvas绘图的基本方法,如下： const myCanvas = document.createElement('canvas'); myCanvas.width = 400; myCanvas.height = 400;const ctx = myCanvas.getContext('2d');const img = new Image();img.src = 1.jpg;//当图片加载完毕...

PDF.js是一款基于HTML5建立的PDF阅读器，兼容大部分主流的浏览器，使用起来，也相对简单。步骤如下： 1.下载PDF.js插件 下载地址：http://mozilla.github.io/pdf.js/getting_started/#download 2.文件部署...

利用 canvas 除了可以实现滤镜，还可以利用 离屏技术 放大镜功能。 为了方便讲解，本文分为 2 个应用部分： 实现水印和中心缩放 实现放大镜 1. 什么是离屏技术？ canvas 学习和滤镜实现...

我们先看看粒子时钟的效果，如下： 下面我们将通过canvas和js实现， 首先要创建一个html文件并添加一个canvas画布，如下： !DOCTYPE htmlhtml lang=enhead meta charset=UTF-8 titleDocument/title style .co...

本文介绍了用canvas画心电图的示例代码，分享给大家，具体如下： 效果图： 思路： 1.模拟点（如果你有真实的数据，那就是把数据幻化成canvas对应的坐标点） 模拟点时注意的点就是高...

figure标签和figcaption标签是html5新增的语义化标签。 figure标签，html5语义化标签。 用于规定独立的流内容（图像、图表、照片、代码等等）。 figcaption标签，html5语义化标签。 与figure配套...

下面通过实例代码给大家介绍HTML5中使用json对象的方法，具体代码如下所示： !DOCTYPE htmlhtml head meta charset=UTF-8 meta name=viewport content=width=device-width, height=device-height, initial-scale=1, maximum-s...

本文介绍了canvas像素点操作之视频绿幕抠图，分享给大家，具体如下： 用法： context.putImageData(imgData, x, y, dX, dY, dWidth, dHeight); 参数 描述 imgData 规定要放回画布的 ImageData 对象。 x Image...

前俩天做了一个图片转base64上传的功能，发现如果图片的base64过大的话，请求会变的很慢，严重的直接超时了，所以想到了在上传前压缩一下图片，然后再上传到后台，这样可以大大的...

第一种方法：(使用html5shiv) !--[if lt IE9] script src=http://html5shiv.googlecode.com/svn/trunk/html5.js/script![endif]-- 由于国内google的服务器访问卡，建议调用国内的cdn !--[if lt IE 9] script src=https://oss.maxc...

本文介绍怎么解决canvas绘图过程中，drawText的换行问题，先看一个大家平时在canvas绘制文本都会遇到的问题： 一个150*100的canvas画布，加个边框明显边界 canvas id=canvas style=border:solid 1px...

一、首先，图片服务器需要配置Access-Control-Allow-Origin 一般团队都会有一个专门域名放置静态资源，例如腾讯是gtimg.com，百度是bdimg.com；或者很多团队使用的是腾讯云或者阿里云的服务。...

H【文章出处:欧洲服务器】5页面在IOS端测试的时候发现，点击按钮会闪动，出现一个黑色的背景一闪而过，影响用户体验。最后通过度娘，找到解决方法： 就是给点击的元素添加一个...

本文介绍了Canvas引入跨域的图片导致toDataURL()报错的问题的解决，分享给大家，具体如下： 【场景】 用户打开网页，则请求腾讯COS（图片服务器）上的图片。使用canvas绘图。 然后，用...