到目前为止,我们使用canvas绘制图形的基本知识已经介绍完毕,从本节开始,我们将介绍其他比较高级的绘制知识之一 —— 线性渐变,首先我们来回顾一下《HTML5每日一练之Canvas标签的应用-绘制矩形》中指定填充的颜色fillStyle。绘制线性渐变时,我们需要使用到一个新的对象——LinearGradient对象,使用图形上下文对象的createLinearGradiend方法来创建该对象,该方法的定义如下: context.createLinearGradient(xStart, yStart, x...
今天我们将要学习在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...