二话不说，先上效果图以及源代码~HTML代码 XML/HTML Code复制内容到剪贴板 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <script type="text/javascript" src="chp1_guess_the_letter.js?1.1.5">script> <script type="text/javascript" src="modernizr.custom.99886.js?1.1.5">script> head> <body> <canvas id="canvas_guess_the_letter" width="500" height="300"> 你的浏览器不支持HTML5 Canv...
移动前端中常说的 viewport （视口）就是浏览器显示页面内容的屏幕区域。其中涉及几个重要概念是 dip （ device-independent pixel 设备逻辑像素 ）和 CSS 像素之间的关系。这里首先了解以下几个概念。 layout viewport（布局视口） 一般移动设备的浏览器都默认设置了一个viewport 元标签，定义一个虚拟的layout viewport（布局视口），用于解决早期的页面在手机上显示的问题。iOS, Android基本都将这个视口分辨率设置为 980px，所...
API简介今天我们开始征战一个全新的内容——HTML5 Canvas的文本API！要知道，艺术家通常同时也是一个书法家，所以我们要学习写字，而且是写出漂亮的字。是不是很有意思？ 好了，先预告一下Canvas 文本API有哪些。 属性描述font设置或返回文本内容的当前字体属性textAlign设置或返回文本内容的当前对其方式textBaseline设置或返回在绘制文本时使用的当前文本基线方法描述fillText()在画布上绘制“被填充的”文本strokeTex...
HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。 一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也没有键盘，所以在为移动Safar...
使用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...
Web设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站。我们可以在不使用内联和标签的基础上对网站添加漂亮而细腻的风格样式。事实上，我们目前的设计能力已经让我们远离了那个可怕的浏览器战争时代、专有协议和那些充满闪动、滚动和闪烁的丑陋网页。 虽然我们现在已经普遍使用了HTML4和CSS2.1，但是我们还可以做得更好！我们可以重组我们代码...
HTML5教程:HTML5的基础写法对比一下XHTML 1.0 Transitional的规范，html5基本上没有XHTML 1.0 Transitional严格的要求，并且简化了很多东西。?文档声明更简单了。1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <!--在HTML5中，这样写：--> 3 <!DOCTYPE html>?html标签上不需要声明命名空间。1 <html xmlns="http://www.w3.org/1999/xhtml">...
今天我们介绍相关HTML5的参考手册，演讲稿，电子书和教程。 HTML5是新兴的web技术，虽然不是完全的新技术但是已经有很多的相关文章介绍HTML5，特别是当我们谈论HTML5将成为Flash的替代品。现代浏览器的快速开发已经刺激用户相应发展。毫无质疑，现在是学习HTML5的好时间，大多数的公司例如Google，Youtube，Facebook都已经开始使用HTML5来建站了。 这篇文章我们将介绍最好的HTML5参考手册，电子书，教程。友情提示：你最好阅读一些...
在这篇快速的jQuery插件开发教程中，我们将创建一个jQuery插件用来随机排序显示任何一个DOM元素的文字内容 -这将会是一个非常有趣的效果，可以用在标题，logo及其幻灯效果中。 在线演示 在线下载 代码片段那么第一部呢，我们将开发jQuery插件的基本架构。我们将把代码放入一个自运行的方法中，并且扩展$.fn.assets/js/jquery.shuffleLetters.js(function($){$.fn.shuffleLetters = function(prop){// Handling default argu...
HTML5 作为下一代网站开发技术，无论你是一个 Web 开发人员或者想探索新的平台的游戏开发者，都值得去研究。借助尖端功能，技术和 API，HTML5 允许你创建响应性、创新性、互动性以及令人惊叹的漂亮网站。更进一步，你也可以使用 HTML5 创建原来只能用于桌面平台上的复杂应用程序。 这篇文章挑选了 Web 开发人员不能错过的10个 HTML5 开发教程，能够帮助你快速掌握 HTML5 高级开发技巧。1. Create a drawing app with HTML5 Can...
大家可能都知道HTML5中出现了很多以前没有的标签，例如，header，nav，和footer，在这之前我们如果开发相关的页面布局的时候，往往都是使用CSS来定义相关的头部，导航及其页底部分，如下：#nav{ padding： 10px... } #header{ padding： 10px ... } #footer{ padding： 10px ... } 定义完之后呢，我们使用p标签来组织页面结构，如下：<div id=“header”></div> <div id=“nav”></div> <div id=“footer”></div>这样的代码...
你喜欢HTML5吗？我想下面的这7个HTML5应用一定会让你爱上HTML5的，不信就一起来看看吧。1、HTML5/jQuery雷达动画图表 图表配置十分简单之前我们介绍过不少形形色色的HTML5图表了，像这款HTML5折线图表Aristochart是一款很不错的折线图表，这款HTML5 Canvas饼状图表也很酷。今天我们再来分享一款很特别的HTML5图表，它是利用HTML5和jQuery的雷达动画图表，图表数据在初始化的时候带有一定动画。在线演示 源码下载2、HTML5模拟...
不带边框的iframe因为能和网页无缝的结合从而不刷新页面的情况下更新页面的部分数据成为可能，可是 iframe的大小却不像层那样可以“伸缩自如”，所以带来了使用上的麻烦，给iframe设置高度的时候多了也不好，少了更是不行，现在，让我来告诉大 家一种iframe动态调整高度的方法，主要是以下JS函数： 一、程序代码 function SetWinHeight(obj) { var win=obj; if (document.getElementById) { if (win && !window....
本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, “The Basic Rectangle Shape”. 让我们来看一下Canvas内置的简单几何图形 — 矩形的绘制。在Canvas中，绘制矩形有三种方法：填充(fillRect)、描边(StrokeRect)以及清除(clearRect)。当然，我们也可以使用“路径”来描绘包括矩形在内的所有图形。 以下是上述三种方法的API: 1.fillRect(x,y,width,height)。绘制一个从(x,y)开始，宽度为width，高度为height的实心矩...
此文下面的教程中将使用的是另外一个叫做kinetic的Web动画工具包。它们都是开源的。把鼠标放到上面的小丑脸上，然后移开，就会有如下效果。 第一步，画五官这个小丑没有耳朵和眉毛，所以只剩下三官，但它的两个眼睛我们要分别绘制，所以一共是四个部分。下面先看看代码。绘制左眼的代码var leftEye = new Kinetic.Line({x: 150,points: [0, 200, 50, 190, 100, 200, 50, 210],tension: 0.5,closed: true,stroke: white,strokeWidth...