绘制图形的时候，我们可能经常会想到旋转图形，或者对图形使用变形处理，使用Canvas API的坐标轴变换处理功能，就能实现这种效果。 在计算机上绘制图形的时候，是以坐标点为基准来进行绘制的，默认情况下Canvas画布的最左上角对应于坐标轴的原点(0, 0)。前面我们所讲的所有利用Canvas API绘制出来的图形都是以画布最左上交为坐标轴圆点，并以像素为单位来进行绘制的。 如果对这个坐标轴进行改变，那么就可以实现图形的变...
meter标签：此标签与progress百分比标签差不多，它主要表现规定范围内的数量值，例如磁盘的食用量，对某个候选者人数占总投票人数的比例值等，如下图：meter有六个属性：属性名称描述value在元素中表现出来的实际数量值。该属性缺省值为0，可以给该属性指定浮点数小数值。min指定规定范围时允许使用的最小值，该属性缺省值为0，设置最小值时，值不可小雨0。max指定规定范围时允许使用的最大值，如果设定该属性值小于min属性的值，那...
progress标签： 从名字上来看，估计大家也能猜到这个标签是什么标签了，没错，他是一个进度条。在HTML5中我们终于可以不用模拟了。progress属性： value：表示当前进度 max：表示总进度 注：value和max属性的值必须大于0，value的值小于或等于max属性的值。案例：HTML5每日一练progress标签的应用 W3Cfuns-HTML5每日一练progress标签的应用 完成百分比：
与音频一样，在过去，我们如果想在Web上播放视频，也是都是通过Flash来播放，同样并不是所有的浏览器都安装了Flash播放器插件，而现在我们在HTML5中，就能完全脱离Flash或其他的插件来播放视频了。video标签：IE9FireFox 5.0Safari 5.5Chrome 12Opera 11.5Mpeg4√√√Ogg√√√WebM√√√Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件MPEG4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件WebM：带有 VP8 视频编码和...
mark标签：mark元素表示页面中需要突出或高亮显示的内容，在搜索结果中也常常出现，比如检索结果中的关键词高亮显示。案例： [html] HTML5每日一练之mark标签的应用HTML5|CSS3|论坛 | 前端开发网(W3Cfuns.com)!HTML5论坛,CSS3论坛,CSS论坛,WEB前端开发论坛,教程资源完全免费的CSS论坛，打造最好的HTML5/CSS3论坛 [/html]
注：本节内容，需要您有JS基础才能更好地理解。 今天教大家如何在canvas上绘制矩形，当你学会后，可以再举一反三的做一下练习，然后回帖，有什么不会的地方，大家都会热心地帮助你指导，当我们一起进步。绘制矩形的步骤：1、在页面上创建一个canvas标签 首先在页面上建立一个canvas标签，因为我们所有的操作都要在canvas元素上完成。2、使用js取得canvas元素 由于需要调用canvas给我们提供的对象方法来进行绘制图形，所以第二...
我们到现在为止，已经学习了利用坐标变换而实现的图形变换技术，当利用坐标变换不能满足我们的需要时，我们可以利用矩阵变换技术。接下来，我们将介绍更为复杂的矩阵变换变形技术。矩阵是用来专门实现图形变形的，它与坐标一起配合使用，达到变形的目的。当图形上下文被创建完毕时，事实上也创建了一个默认的变换矩阵，如果不对这个矩阵进行修改，那么接下来绘制的图形将以画布的最左上角为坐标原点进行绘制图形，绘制出来的图形也...
到目前为止，我们使用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...
Web Workers Web Workers 简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始，HTML5 承载了越来越多崭新的特性和功能。它不但强化了 Web 系统或网页的表现性能，而且还增加了对本地数据库等 Web 应用功能的支持。其中，最重要的一个便是对多线程的支持。在 HTML5 中提出了工作线程（Web Workers）的概念，并且规范出 Web Workers 的三大主要特征：能够长时间运行（响应），理想的启动性能以及理想的内存消耗。Web Work...