回复内容： 所谓的毛玻璃效果其实是半透明+模糊，可以用CSS filter实现。时间不多，就抛个砖，题主可以自己找一下文档和更多案例。filter - CSSdiv {-moz-filter: blur(5px);-webkit-filter: blur(5px);-o-filter: blur(5px);-ms-filter: blur(5px);filter: blur(5px); }推荐这篇博客小tip: 使用CSS将图片转换成模糊(毛玻璃)效果 张鑫旭介绍了三种方法。分别是目前大多数人说的CSS3的filter，还有SVG的滤镜，和用Canvas实现高斯模...
用html5实现如图字中有字效果 实现思路：用canvas输出文字，然后分析像素点，根据像素点输出文字。 核心代码：JavaScript Code复制内容到剪贴板var canvas; var ctx; var tex; var blankStr = " ";//输出空白 $(function () { $("button#bt").click(function () {//绑定按钮单击事件 if ($("canvas#myCanvas").length > 0) { canvas = $("canvas#myCanvas")[0]; ...
在HTML 5中，现在可以在客户端进行文件上传时的校验了，比如用户选择文件后，可以 马上校验文件的大小和属性等。本文章向码农介绍html5 如何实现客户端验证上传文件的大小，感兴趣的码农可以参考一下。 在HTML 5中，现在可以在客户端进行文件上传时的校验了，比如用户选择文件后，可以马上校验文件的大小和属性等，这其实时得益于浏览器端新增的对文件的校验能力，其中支持HTML 5的浏览器，都会实现W3C实现的文件API标准，其中可以...
HTMl5 推出了一个很“特别”的 API Page Visibility ，之所以说它特别，是因为这个 API 关注的是一个很少人留意的功能 —— 浏览器标签( tab ) 是否被激活。这里必须解释一下，这个“激活”，指的是这个标签是否正被用户浏览，或者说是否为当前标签。那么，这个 API 究竟有些什么用途呢？通常，很多传统的页面在用户没有激活它的时候，它还会继续工作，例如，当用户正在浏览新闻门户，而他之前打开的...
PC端上传文件多半用插件，引入flash都没关系，但是移动端要是还用各种冗余的插件估计得被喷死，项目里面需要做图片上传的功能，既然H5已经有相关的接口且兼容性良好，当然优先考虑用H5来实现。用的技术主要是：ajaxFileReaderFormDataHTML结构：<p class="camera-area"> <form enctype="multipart/form-data" method="post"> <input type="file" name="fileToUpload" class="fileToUpload" accept="image/*" capture="camera"/...
本示例使用HTML5 canvas，简单的编写了上传头像的裁剪效果，移动端支持拖拽后裁剪， 虽然样式不好看，但是功能还算全： 下图为裁剪后的效果：html部分：XML/HTML Code复制内容到剪贴板> html lang="en"> head> meta charset="UTF-8"> title>上传头像title> meta name="renderer" content="webkit"> meta name="viewport" content="width=device-width, initial-scale=1.0"> head> body> div id="imgCrop"...
使用HTML5的canvas画的孙悟空，CSS3画的白云飘飘。效果图：<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5+CSS3实现齐天大圣腾云驾雾</title> <style type="text/css"> * { margin: 0; padding: 0; bo...
HTML5在移动设备上表现，相信已经不用我多说了，干掉了Flash之后，它已经坐上了移动应用程序的第一把交椅。几乎所有稍微高端一点的设备（乔帮主的iPad，iPhone和Andriod的平板手机等）的浏览器都支持HTML5，而且据权威人士测试，这些支持HTML5的设备对Canvas标签的支持也是相当的好。大家都知道Web2.0以来，应用程序的实现使用了大量Ajax，而Loading的小图标也有很多，甚至还有专门提供Loading图片的网站，所以我就想能不能让HTML5...
简介： 本文是一个非常具有挑战性的编程，因为 100 行代码，约莫 10000 个字符左右，将实现围棋、五子棋、四子棋和翻转棋四种双人对弈游戏。请注意，这四个对弈游戏不是初级编程者的习作，而是有着棋盘、立体棋子、事件、走棋规则判断、输赢判断的完整对弈游戏，并且可以离线存储到 iPad、Android 平板中，试想一下，把这种游戏下载到平板中，就可以在火车，旅游景区，等没有信号的地方进行对弈，是不是扩展了平板电脑的功能，是...
了解上两篇的内容请点击：html5游戏开发-零基础开发RPG游戏-开源讲座(一)http://www.html5cn.org/article-1737-1.htmlhtml5游戏开发-零基础开发RPG游戏-开源讲座(二)-跑起来吧英雄http://www.html5cn.org/article-1738-1.html前两篇，RPG的开发已经实现了添加地图和添加游戏人物，本篇来实现地图的卷轴滚动和人物对话的实现，效果如下本次开发，更新了一下库件至1.3，请点击下面的链接，下载库件1.3版以上版本http://code.google.c...
在网页中实现图片上传功能，当用户选择了图片文件后，想在页面中即时预览该图片，这个简单的需求在很久很久以前可以实现，后来因为安全性的问题被禁止直接访问本地文件了，所以又在很长很长一段时间里，想通过HTML直接预览用户选择的图片变得不可能，自从有了HTML5，这个功能又回来了，通过FileReader可以轻松的实现这个功能。 只要在< input type ="file" / >文件表单元素中监听 onchange 事件，然后通过FileReader读取图片文...
在本文中将利用封装过的API实现一个定时提醒工具。 工具的主要目的是：自己经常坐在电脑前，一坐就是好几个小时，希望有工具能够每小时提醒自己起来活动休息一会。 主要功能有：用户可以设置周期性的提醒时间，比如设置每1小时提醒一次，1小时后将弹出通知框提醒用户时间到。 其他包括：用户能够设置对话框的持续时间，比如持续15秒，15秒后对话框消失，以及提醒内容等。HTML&CSS 首先先创建基本的HTML结构如下：时间提醒div {marg...
在传统的HTTP应用上传文件想要同时上传多个文件并查看上传进度是一件很麻烦的事情,当然现在也有一些基于SWF的文件上传组件提供这种的便利性.到了HTML5下对文件的读取和上传的控制方面就非常灵活,HTML5提供一系列的AIP进行文件读取,包括计取文件某一块的内容也非常方便,结合Websocket进行文件的传输就变得更加方便和灵活.下面通过使用HTML5结合websocet简单地实现多文件同时上传应用。 实现功能 大概预览一下需要做的功能:主要功能是...
使用HTML5画布实现的超棒javascript动画仪表板：gauge.js?1.1.2 今天我们分享来自guage.js的超棒动画仪表板实现，这个类库使用html5画布来生成动态的自定义仪表板。不依赖于任何类库也不实用任何的CSS或者图片，完全使用画布生成。 拥有两套不同的UI，一个是仪表盘，一个类似原来我们介绍的jQuery knob界面。支持UI元素自定义你可以生成自己需要的颜色格式。 主要特性：无图片，CSS无类库依赖（支持jQuery，但是...
HTML5组件Canvas实现图像灰度化(步骤+实例效果)新建一个html页面，在body tag之间加入 <canvas id="myCanvas" >Gray Filter</canvas>添加一段最简单的JavaScript 脚本 <pre name="code" class="javascript">window.onload = function() { var canvas = document.getElementById("myCanvas"); <span style="white-space:pre"> </span>// TODO: do something here }从Canvas对象获取绘制对象上下文Context的代码如下： var contex...