今天我们将要学习在HTML5中最吸引眼球的一个标签——Canvas，我相信有很多人学习HTML5就是为了Canvas。这节内容非常简单，主要是为大家介绍Canvas标签的使用。 在我们学习它之前稍微补充一下知识，虽然有点理论，但以下稍微理论点的东西还是很有用的。 Canvas标签的基础知识： canvas是HTML5中新增加的一个重要元素，专门用来绘制图形。在页面上放置一个canvas元素，就相当于在页面上放置了一个“画布”，如果您做过Flash，可以理解...
到目前为止，我们已经学会了很多Canvas的绘制方法，如果我们要绘制如下图的图形怎么办呢？我们需要对矩形变形，使用坐标变换就足够了。但是对使用路径绘制出来的图形进行变幻的时候，那么要考虑的事情就 多了。因为使用坐标变换之后，已经创建好的路径就不可用了。必须要重新创建路径，重新创建路径后，坐标变换方法又失效了。解决思路 1、必须先另外绘制一个创建路径的函数。 2、在坐标变幻的同时调用该函数。代码案例HTML5每日一...
我们学习了如何使用Canvas绘制线性渐变图形，今天我们来学习一下如何绘制径向渐变图形。通过上节课的学习，我们知道绘制线性渐变图形用到了一个非常重要的函数——createLinearGradiend();如果我们要绘制径向渐变我们也有类似的方法，如下： context.createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd);xStart：渐变起始点的横坐标 yStart：渐变起始点的纵坐标 xEnd：渐变结束点横坐标 yEnd：渐变结束点纵...
在本节课，你只需要了解即可，不需要大量的练习，我们下节课会用到此函数。Canvas里的globalCompositeOperation是个很少用到的函数,不太熟悉程序绘图的同学们估计压根都不知道这玩意是干什么的. 简单来说,Composite(组合),就是对你在绘图中,后绘制的图形与先绘制的图形之间的组合显示效果,比如在国画中,你先画一笔红色,再来一笔绿色,相交的部分是一种混色,而在油画中,绿色就会覆盖掉相交部分的红色,这在程序绘图中的处理就是Compos...
本节主要是对之前我们学习的Canvas进行一个小小的复习，没有用到新的技术，唯一用到的就是新的数学算法。使用Canvas绘制向日葵1：效果如下图：HTML5每日一练之Canvas标签的应用-绘制复杂图形 window.onload = function() { var canvas = document.getElementById("W3Cfuns_canvas"); var context = canvas....
HTML5每日一练之Canvas标签的应用-绘制圆形咱们上一节学习了如何使用Canvas绘制矩形，如果想要绘制一个圆形是不是还跟举行一样呢？绘制圆形的步骤：有些步骤与上节的绘制矩形差不多，股在这里不再赘述。如果没有看上节内容的，请点击这里——HTML5每日一练之Canvas标签的应用-绘制矩形。1、开始创建路径首先使用图形上下文对象的beginPath()方法。2、创建圆形路径创建圆形路径时，需要使用圆形上下文对象的arc()方法。arc(x, y, ra...
如果你想创建漂亮的文字云或者标签云效果的话，你可以考虑使用D3-Cloud，这是一个超棒的开源字体云效果javascript类库，基于知名的D3.js，能够帮助你生成类似wordle.com风格的字体或者标签云效果。 这个类库使用HTML5画布来生成字体效果，整个布局算法可以异步实现，只需要设置时间块大小。并且支持动画特效。整体性能非常不错。 配置如下var fontSize = d3.scale.log().range([10, 100]);var layout = cloud().size([...
大家可能都知道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 template元素初面 元素，基本上可以确定是2013年才出现的。干嘛用的呢，顾名思意，就是用来声明是“模板元素”。 目前，我们在HTML中嵌入模板HTML，往往是类似这样的写法：XML/HTML Code复制内容到剪贴板script type="text/template"> // ... script> 实际上，并不存在type="text/template"这样的标准写法，元素的出现旨在让HTML模板HTML变得更加标准与规范。 以前，我们可能还使用过或者(废止但依然可用)嵌套非转义...
HTML5的最强大之处莫过于对媒体文件的处理，如利用一个简单的vedio标签就可以实现视频播放。类似地,在HTML5中也有对应的处理音频文件的标签，那就是audio标签 HTML5出来这么久了，但是关于它里面的audio标签也就用过那么一次，当然还仅仅只是把这个标签插入到了页面中。这次呢就刚好趁着帮朋友做几个页面，拿这个audio标签来练练手。 首先你需要向页面中插入一个audio标签，注意这里最好不要设置loop='loop',这个属性使用来设置循环...
一、基本概念 什么是Canvas 是一个新的 HTML 元素，这个元素在 HTML5 中被定义。这个元素通常可以被用来在 HTML 页面中通过 JavaScript 进行绘制图形、合成图像等等操作，也可以用来做一些动画。当然，目前 HTML5 规范还在草稿阶段，正式发布也许要等到2010年，不过现在已经有不少浏览器已经支持了部分 HTML5 规范。目前支持 canvas 元素的浏览器有 Firefox 3+、Safari 4、Chrome 2.0+ 等，因此，在运行本页中的例子时，请确保你使...
b 和 i 标签在现在的 Web 标准潜规则中是不推荐使用，甚至是反对使用的，因为认为他们只是“表现”粗体和斜体，而没有任何“语义”。更多的用 strong 和 em 标签代替。而在新的 HTML5 工作草案 中对于 b 和 i 标签是这样定义的：从规范中可以注意到：b 和 i 元素将被赋予真正的语义。更应有预见性注意 b 、i 与 strong 、em 的不同使用 。扩展阅读：HTML4 到 HTML5 的变化 A Preview of HTML 5 The b element ...
W3C 在 2008年 1 月 22 日发布了最新的 HTML 5 工作草案。HTML 5 工作组包括 AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera 以及数百个其他的开发商。HTML 5 中的一些新特性：嵌入音频、视频、图片的函数、客户端数据存储，以及交互式文档。其他特性包括新的页面元素，比如 , , , 以及 。 通过制定如何处理所有 HTML 元素以及如何从错误中恢复的精确规则，HTML 5 改进了互操作性，并减少了开发成本。 按字母顺序排列...
本文主要介绍body标签 body元素就是就是html文档的主内容标签。 可设置属性 onafterprint 在打印文档之后运行脚本 onbeforeprint 在文档打印之前运行脚本 onbeforeonload 在文档加载之前运行脚本 onblur 当窗口失去焦点时运行脚本 onerror 当错误发生时运行脚本 onfocus 当窗口获得焦点时运行脚本 onhaschange 当文档改变时运行脚本 onload 当文档加载时运行脚本 onmessage 当触发消息时运行脚本 onoffline 当文档离线时运行脚本 o...
它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash, Microsoft Silverlight, 与 Sun JavaFX 的需求。 HTML 5 提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似 和 标签，但有一定含义，例如 （网站导航块）和 。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能，通过一个标准接口...