video.js是一款很流行的html5视频播放插件。很适合在移动端播放视频(比如微信网页)，功能强大，且支持降级到flash,兼容ie8。官网：http://videojs.com/ gitdemo ：http://files.cnblogs.com/files/stoneni...

为啥写这篇文章 最近接了个需求，要求长按某个标签显示删除一个悬浮的删除按钮。这个需求其实在app上很常见，但是在移动端h5中，我们没有长按的事件，所以就需要自己模拟这个事...

具体代码如下所示： html lang=enheadmeta charset=UTF-8titleDocumenttitlestylefigcaption {text-align: center;line-height: 150px;font-family: Microsoft Yahei;font-size: 24px;}.player {width: 720px;height: 360px;margin: 10px auto;borde...

Introduce(介绍) 用户签到的H5例子（css+jquery，无图片），由于网上找的的用户签到例子都不好，要不就是好多图片组成的，要不就大量冗余代码，所以特意做了个签到界面（移动端）。...

本文介绍了详解HTML5将footer置于页面最底部的方法(CSS+JS)，分享给大家，具体如下： JavaScript: script type=text/javascript $(function(){ function footerPosition(){ $(footer).removeClass(fixed-bottom); //网页正文...

工作中碰到个奇怪的问题，折腾了大半天，终于算是解决了，这里把分析思路和解决办法记录下。 项目是做响应式的公司官网，前期的静态图页面切完后就提交给后台作为模板使用了，...

背景概要 相信大家平时在学习canvas 或 项目开发中使用canvas的时候应该都遇到过这样的需求：实现一个可以书写的画板小工具。 嗯，相信这对canvas使用较熟的童鞋来说仅仅只是几十行代...

对话框（别称模态框，浮层）是web项目中用于用户交互的重要部分，我们最常见的就是js中 alert()，confirm()，但是这个对话框的不美观，也不能自定义样式，所以在开发的过程中，一般根...

转眼间，已经实习了两个月了，公司每个月都有个会员日的活动要做，这个月的任务是做一个扭蛋机抽奖的活动，数据什么的都有接口，那么前端剩下最大的任务就只剩下扭蛋机的动画...

一、HTTP的轮询 Web客户端与服务器之间基于Ajax（http）的常用通信方式，分为 短连接 与 长轮询 。 短连接：客户端和服务器每进行一次HTTP操作，就建立一次连接，任务结束就中断连接。...

需求描述 接到的原始需求是这样的，有一个H5页面，页面中有个点击下载的按钮，点击之后，完成下载特定的apk。 大概是下面这样的： 需求分析 接到需求的时候我偷乐了一下，这个...

关于 HTML5 ，写了不少文章，总觉得相关的高级 API 都得过一遍。系统的了解，站在更高的高度去思考问题，这样才能事半功倍。 一、先睹为快 我们先来尝试一个最简单的例子，打开...

有时候会遇到傻X需求，比如前端单点登陆！遇到需求，就要去想解决办法， 这里我给大家做一个简单的前端单点登陆的解决方案， 用到的就是postMessage跨域信息传输以及onstorage的监听...

最近因为工作需要，所以就学了一下Html中的Canvas标签。 Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。 没有Canvas的年代，绘图只能借助Flash插...

由于公司业务需要，vue制作的网页需要连接智能家居的wifi，【本文由：http://www.nextecloud.cn/flb.html提供，感谢】然而这种wifi是没有连接互联网的，仅用于手机与家居的对接。这样，就导...

Canvas 跨域如何解决？这里记录下使用 Canvas 绘图过程中所遇到的跨域问题和解决方案。 先来看下实现方法。 实现方法 目标图片一般是由 图片 + 文本 构成。无论是千奇百怪的大小图片...

最近做项目的时候遇到照片拼图的功能，便在这里分享自己的封装的canvas拼图功能，可能代码写的不好，如果有疑问或者是有更好的方法的，可以私聊我，或者是评论指出，感谢各位...

我们都知道localStorage不主动删除,永远不会销毁，那么如何设置localStorage的过期时间呢，今天我们来一起尝试一下！ script type=text/javascript //封装过期控制代码 function set(key,value){ var curT...

canvas中的clip()方法用于从原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内(不能访问画布上的其他区域) 也可以在使用clip()方法前...

在做一些活动页的时候，经常会有一些需要上传图片的需求，并且还需要将图片以及生成的文字以及贴图生成一张卡可以供用户可以长按保存。这个需求之前完成过一次，最近又遇上了...

在Canvas中进行碰撞检测，大家往往直接采用游戏引擎(Cocos2d-JS、Egret)或物理引擎(Box2D)内置的碰撞检测功能，好奇的你有思考过它们的内部运行机制吗？下面将针对基本的碰撞检测技术进...

国际惯例，先上效果 好了，话不多说，上去就是一顿撸。 css: style *{margin: 0;padding: 0} .wrap{ } .container{ width: 100%; overflow: hidden; /* height: 400px; */ background: red; position: relative; } .box{width: 125%...

啦啦啦，首先说下需求，产品想让用户在我们app内，分享一张图片到微信、qq等平台。图片中包含用户的姓名、头像、和带着自己信息的二维码。然后，如何生成这张海报呢~~~ 首先我们...

前言 计时器一直是javascript动画的核心技术。而编写动画循环的关键是要知道延迟时间多长合适。一方面，循环间隔必须足够短，这样才能让不同的动画效果显得平滑流畅；另一方面，...

在默认情况之下，如果在Canvas之中将某个物体（源）绘制在另一个物体（目标）之上，那么浏览器就会简单地把源特体的图像叠放在目标物体图像上面。 简单点讲，在Canvas中，把图像源...

最近写项目有用到html2canvas.js，可以实现页面的截图功能，但遭遇了许多的坑，特此写一篇随笔记录一下。 在使用html2canvas时可能会遇到诸如只能截取可视化界面、截图没有背景色、s...

我们在码代码的时候，经常会碰到以下跨域的情况： 1、页面内嵌套iframe，与iframe的消息传递 2、页面与多个页面之间的传递消息 针对这些令人头疼的跨域问题，html5特地推出新功能--...

需求 混合App开发，原生壳子+webApp，在web部分调用原生摄像头功能并且在网页指定区域显示摄像头内容，同时可以手动拍照并进行人脸识别，将识别结果显示在网页上。 技术栈 vue、Ht...

手机浏览器在滚动当前页面（还可能是缩放页面）时，由于默认行为被阻止，导致页面被迫静止，导致用户使用体验差，感觉滚动页面有停顿感。 具体一点的解释：由于 touchstart 事件对...

canvas用于在网页上绘制图像、动画，可以将其理解为画布，在这个画布上构建想要的效果。 canvas可以绘制动态效果，除了常用的规则动画之外，还可以采用粒子的概念来实现较复杂的动...

前言 最近做的一个app项目使用的 apicloud 来实现跨平台开发，现在需要为这个 app 添加手势（九宫格）解锁的功能，apicloud 已经有一些第三方的原生实现的手势解锁插件，因为是原生的性...

第一次写俄罗斯方块的时候已经是1年多前了，也是我刚刚学js不久。 为了加强对js的理解又加上对游戏的爱好，于是在没有参考他人的思路和代码下，自己用最基本的js代码写出了基于...

简介什么是Fabric.js? Fabric.js是一个可以简化Canvas程序编写的库。 Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具。由于Fabric.js为国外框架，官方API杂乱...

一 定义和用法 getImageData()方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。 注意：ImageData对象不是图像，它规定了画布上一个部分（矩形），并保存了该矩形内每个像素...

代码优化永远是程序员亘古不变的需求，而合理的利用SVG图片来代替部分PNG/JPG等格式的图片则是前端优化重要的一环，既然是优化，那我们先来看看SVG图片都有哪些优势： SVG 可被非常...

如果你想绘制的网页包含一个圆弧形的头像的canvas图片，但是头像本身是正方形的，需要的方法如下： 首先， 拿到头像在画布上的坐标和宽高：(具体怎么获取不在此做具体介绍) let...

我们要绘制一张图片，内容包括一张背景图和一个动态生成的二维码，前提是背景图是项目本身的静态资源，二维码是服务端动态生成的，二者不在同一域名下。 解决办法：把所有图片...

在开发中，如果遇到需要使用canvas同时绘制多张图片，但因为图片大小的不一样，排在数组前面的图片不一定能先被load然后绘制，就可能会导致画出来的图的排列顺序和预想的不一样（...

本文介绍了解锁canvas导出图片跨域的N种姿势小结，分享给大家，具体如下： Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported. 上面这个错误相信大...

开篇 最近在做一个chrome app的云相机应用，应用包括拍照、摄像、保存照片视频、上传文件等等核心功能，其中涉及到很多HTML5对媒体流相关的API。写这篇文章的目的，其一是总结梳理知...

问题背景 有一天我们的UI设计师找到我说，要把页面中我自己用程序写的动画，换成他们给的json动画，原因是有的动画很复杂，自己写起来达不到他们的预期效果（写到这里我突然想到...

根据百度地图官方解释，在移动端 H5 页面中可监听下面这 4 个事件: touchstart, touchmove, touchend, longpress 而如果地图上监听了 click 事件，在移动端是不会执行这个事件里面的代码的。 我之...

Canvas绘图环境中有些属于立即绘制图形方法，有些绘图方法是基于路径的。 立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText()方法也是立即绘制的，但是文本不算是图...

Canvas 真的是一个神奇的东西，不仅能够绘制各种图形、文本和位图，还能够对位图进行复杂的像素运算和处理。因此像滤镜这些东西，其实 Canvas 也可以来实现。接下来，是见证奇迹的...

什么叫橡皮筋式 指画图时橡皮筋一样伸缩自如。。 例子如下:point_down: 思路 思路很简单，只有橡皮筋式绘制功能要注意，以下总结mousedown，mousemove，mouseup三个阶段的思路 mousedown：记录...

canvas绘图时drawImage，需要绘制的图片大小不同，比例各异，所以就需要像html+css布局那样，需要contain和cover来满足不同的需求。 contain 保持纵横比缩放图片，使图片的长边能完全显示出...

在网站浏览中，常常需要网页水印，以便防止用户截图或录屏暴露敏感信息后，追踪用户来源。如我们常用的钉钉软件，聊天背景就会有你的名字。那么如何实现网页水印效果呢？ 网页...

想要实现瀑布流的布局效果，并且是按照从左到右顺序显示的话，css布局方式暂时还不能满足我们的需求。参考小红书的瀑布流效果，小红书是分左右两栏的，按照奇数偶数来显示就可...

最近在写嵌入到小程序webview的一个h5页面，是一个文章评论的功能，这个过程中，遇到很多兼容性的问题，在不同机型上的表现也很不一致，所以总结了以下这些问题，记录下来，以便...

本文主要介绍： 项目介绍 项目效果展示 一步步实现项目效果 踩坑 一、项目介绍 名称：智绘画板 技术栈：HTML5，CSS3，JavaScript，移动端 功能描述： 支持PC端和移动端在线绘画功能 实现...