最近在做个网站项目,用到很多canvas,有个需求是drawImage把图片画在canvas里面,图片比较小,需要平铺效果,当背景图。PS(背景图高宽10px,需要画的画布高宽200px)由于一开始是drawImage出来的,所以采用了方法onevar canvas = document.getElementById("canvasId"); var ctx = canvas.getContext("2d"); var img = new Image(); //需要平铺的图片 img.src = "test1_bg.jpg"; img.onload = function (){var can = document.cre...
一、简介我们要做的是怎样一款游戏?在前不久成都TGC2016展会上,我们开发了一款《火影忍者手游》的体感游戏,主要模拟手游章节《九尾袭来 》,用户化身四代,与九尾进行对决,吸引了大量玩家参与。 表面上看,这款游戏与其它体感体验无异,实际上,它一直运行于浏览器Chrome下,也就是说,我们只需要掌握前端相应技术,就可以开发基于Kinect的网页体感游戏。二、实现原理实现思路是什么?使用H5开发基于Kinect的体感游戏,其实工作...
在HT for Web中2D和3D应用都支持树状结构数据的展示,展现效果各异,2D上的树状结构在展现层级关系明显,但是如果数据量大的话,看起来就没那么直观,找到指定的节点比较困难,而3D上的树状结构在展现上配合HT for Web的弹力布局组件会显得比较直观,一眼望去可以把整个树状结构数据看个大概,但是在弹力布局的作用下,其层次结构看得就不是那么清晰了。所以这时候结构清晰的3D树的需求就来了,那么这个3D树具体长成啥样呢,我们来...
一 介绍1、<audio>和<video>元素有不少监听http://www.gxlcms.com/js/js-jspopular-guide-event.html" target="_blank">事件,因此可以绑定这些事件的监听器。2、本应用实现<video>的ontimeupdate事件的监听器。3、通过ontimeupdate事件绑定监听器可以实时监控音频、视频的播放位置。二 代码<!DOCTYPE html> <html> <head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="tex...
1.概述 HTML5 Web Worker可以使Javascript程序在后台单线程执行大量耗时的计算任务。Web Worker在执行时不能直接访问DOM。Web Worker也会消耗CPU和系统资源。Web Worker与页面间的通信可以通过Web Worker的方法postMessage和message事件。2.浏览器支持检测 function loadDemo() { if(typeof(Worker) !== "undefined") { document .getElementById("support").innerHTML = "Excellent! Your browser supports HTML5 Web Workers"...
1.概述 XMLHttpRequest Level 2是对XMLHttpRequest增强,具有cross-origin支持性。2.浏览器支持性检测 if (typeof xhr.withCredentials === undefined) { document.getElementById("support").innerHTML = "Your browser <strong>doesnot</strong> support cross-origin XMLHttpRequest"; } else { document.getElementById("support").innerHTML = "Your browser <strong>does</strong> support cross-...
Progress 元素是 HTML5 标准草案中新增的元素之一,W3C 关于此元素的定义请猛击这里。默认情况下,Progress 会生成一个和系统默认样式一样的进度条。Webkit 中对于 Progress 的默认样式定义在这里可以找到。在 Windows 7 和 MaxOS Lion 中的显示效果如下:看起来貌似还不错,但是如果运行在 Windows XP 下呢?想一下就够头疼了,何况出于一致性的考虑,很多情况下我们还是想能够控制这个进度条的样式。查看了 Webkit 项目中关于 El...
http://www.gxlcms.com/wiki/1118.html" target="_blank">HTML5自定义日历控件的示例代码详解ys_datetime_selector.css.ys-datetime-selector{position:fixed;left:0;right:0;top:0;bottom:0;background-color:rgba(0,0,0,0.3);z-index: 999; }.ys-datetime-selector.display-hide{transform: translate3d(100%,0,0);-webkit-transform: translate3d(100%,0,0);visibility: hidden; }.ys-datetime-selector .ys-datetime-selector-...
摘要:Accordion(手风琴,又名"抽屉")效果,因其收展样式形如手风琴而得名。通过层级关系,在信息展示和页面布局上,达到巧妙的平衡。因此,广泛运用于Web以及App交互设计中。在以往的项目中Accordion通常是由JavaScript编码实现。本次分享,着重探索两种不依靠JS,采用纯CSS3或HTML5来实现其效果。并对其优缺点作初步的对比。传统JS实现方式1、原生JavaScript2、调用JS库文件,jQuery、jQuery Mobile$.menu_lev1).clickfunction...
背景最近在一个 SCADA 项目中遇到了在 Web 页面中展示设备报表的需求。一个完整的报表,一般包含了筛选操作区、表格、Chart、展板等多种元素,而其中的数据表格是最常用的控件。在以往的工业项目中,所有的表格看起来千篇一律,就是通过数字和简单的背景颜色变化来展示相关信息。但是现在通过各种移动 App 和 Web 应用的熏陶,人们的审美和要求都在不断提高,尤其是在 Web 项目中,还采用老式的数字表格确实也有点落伍了。 如何选择...
一、应用场景 我们通常使用浏览器http://www.gxlcms.com/php/php-tp-缓存在用户磁盘上存储web单页,在用户再次浏览的时候已节省带宽,但即便这样,依然无法在没有Internet的情况下访问Web。为了让web应用程序在离线状态也能被访问。html5通过application cache API提供离线存储功能。前提是你需要访问的web页面至少被在线访问过一次。 离线本地存储和传统的浏览器缓存有什么不同呢? 1、浏览器缓存主要包含两类: ...
1、同域限制所谓“同域限制”是指,出于http://www.gxlcms.com/wiki/397.html" target="_blank">安全考虑,浏览器只允许脚本与同样协议、同样域名、同样端口的地址进行通信。2、window.postMessage方法浏览器限制不同窗口(包括iFrame窗口)之间的通信,除非两个窗口装载的是同一个域名下的网页。window.postMessage方法就是为了解决这个问题而特定的API,可以让不同域名的窗口互相通信。postMessage方法的格式如下:targetWindow....
本篇主要讲html5 canvas中剪切区域(clip region)、分层、合成(compositing)、变换(Transformation)(旋转、缩放)功能如何应用。先贴一个以下所有涉及到的实现运行的基本代码段: Base Code<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="modernizr-latest.js"></script> <script type="text/javascript"> window.addEventListener("load", eventWindowLoa...
1、概述WebRTC是“网络实时通信”(Web Real Time Communication)的缩写,它主要用来让浏览器实时获取和交换视频、音频和数据。WebRTC共分三个API。MediaStream(又称getUserMedia)RTCPeerConnectionRTCDataChannelgetUserMedia主要用于获取视频和音频信息,后两个API用于浏览器之间的数据交换。2、getUserMedia2.1 简介首先,检查浏览器是否支持getUserMedia方法。navigator.getUserMedia || (navigator.getUserMedia = navigat...
1、概述Mutation Observer(变动观察器)是监视DOM变动的接口。当DOM对象树发生任何变动时,Mutation Observer会得到通知。要概念上,它很接近事件。可以理解为,当DOM发生变动会触发Mutation Observer事件。但是,它与事件有一个本质不同:事件是同步触发,也就是说DOM发生变动立刻会触发相应的事件;Mutation Observer则是异步触发,DOM发生变动以后,并不会马上触发,而是要等到当前所有DOM操作都结束后才触发。这样设计是为了应...