SVG和canvas中是一样的，都是使用标准的HTML/CSS中的颜色表示方法，这些颜色都可以用于fill和stroke属性。基本有下面这些定义颜色的方式：1. 颜色名字： 直接使用颜色名字red, blue, black...2. rgba/rgb值： 这个也很好理解，例如#ff0000,rgba(255,100,100,0.5)。3. 十六进制值： 用十六进制定义的颜色，例如#ffffff。4. 渐变值：这个也与canvas中一样，支持两种渐变色：线性渐变，环形渐变。如下图所示：5. 图案填充：使用自定义...
到目前为止，SVG与Canvas的主要特性均已经总结完毕了。它们都是HTML5中支持的2D图形展示技术，而且均支持向量图形。现在，我们就来比对一下这两种技术，分析一下它们的长处和适用场景。首先分析一下两种技术的显著特点，看下面的表格： CanvasSVG基于像素（动态 .png）基于形状单个 HTML 元素多个图形元素，这些元素成为 DOM 的一部分仅通过脚本修改通过脚本和 CSS 修改事件模型/用户交互颗粒化 (x,y)事件模型/用户交互抽象化 (re...
基本形状SVG提供了很多的基本形状，这些元素可以直接使用，这一点比canvas好多了。废话不说了，直接看例子，这个最直接：代码如下: <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange" fill="transparent" stroke-width="5"/> <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green" fill="transpare...
交互性 SVG拥有良好的用户交互性，例如： 1. SVG能响应大部分的DOM2事件。 2. SVG能通过cursor良好的捕捉用户鼠标的移动。 3. 用户可以很方便的通过设置svg元素的zoomAndPan属性的值来实现缩放等效果。 4. 用户可以很方便的把动画和事件结合起来，完成一些复杂的效果。 通过给SVG元素挂接事件，我们可以使用脚本语言方便的完成一些交互任务。SVG支持大部分的DOM2事件，例如：onfocusin, onfocusou, onclick, onmousedown, onmouseu...
位图与矢量图 以前，浏览器中显示的图形，例如jpeg、gif等，都是位图，这些图像格式是基于光栅的。在光栅图像中，图像文件定义了图像中每个像素的颜色值。浏览器需要读取这些值并做出相应行动。这种图像的再现能力比较强，但是在某些情形下会显得不足。例如，当浏览器以不同大小显示一副图像时，通常会产生锯齿边缘，这时，浏览器不得不为那些在原始图像中不存在的像素插入或猜测数值；这样会导致图像失真。此外，针对位图进行动画...
前面介绍了很多的图形元素，如果很多图形本身是一样的，需要每次都去定义一个新的么？我们能否共用一些图形呢？这是这节的重点-SVG元素的重用。 组合-g元素 g元素是一种容器，它组合一组相关的图形元素成为一个整体；这样，我们就可以对这个整体进行操作。这个元素通常可以和desc和title元素配合使用，提供文档的结构信息。结构良好的文档通常可读性和渲染效率都不错。看一个小例子： 代码如下: <svgxmlns="http://www.w3.org/2000...
使用脚本可以很方便的完成各种复杂的任务，也是完成动画和交互的一种主流方式。由于SVG是html的元素，所以支持普通的DOM操作，又由于SVG本质上是xml文档，所以也有一种特殊的DOM操作，大多称之为SVG DOM。当然了，由于目前IE不支持SVG，开发基于IE的SVG页面需要采用不同的方式。这部分的知识大家其实都很熟悉，下面只是简单的看一下。 HTML页面中的DOM操作 DOM大家应该很熟悉了，这里先看一个小例子： 代码如下: #svgContainer {...
前面我们重点都在总结各类形状，文本和图片，接下来，我们还是和讨论canvas一样，总结一下颜色处理，也就是填充和边框效果；你会发现这里的内容与canvas基本上是一致的。这些属性既可以以属性的形式写在元素中，也可以以CSS的形式保存(这是与canvas不一样的地方)。填充色 - fill属性这个属性使用设置的颜色填充图形内部，使用很简单，直接把颜色值赋给这个属性就可以了。看例子：代码如下:<rect x="10" y="10" width="100" height=...
坐标系统SVG存在两套坐标系统：视窗坐标系与用户坐标系。默认情况下，用户坐标系与视窗坐标系的点是一一对应的，都为原点在视窗的左上角，x轴水平向右，y轴竖直向下；如下图所示： SVG的视窗位置一般是由CSS指定，尺寸由SVG元素的属性width和height设置，但是如果SVG是存储在embedded对象中(例如object元素，或者其他SVG元素)，而且包含SVG的文档是用CSS或者XSL格式化的，并且这些外围对象的CSS或者其他指定尺寸的值已经可以计算出...
近有在学习html5中video标签（播放器）的使用，这里做一些学习笔记，方便自己查阅和记录，本文是第一篇，将介绍的是使用该标签初始化该做的哪些工作。 网上的教程其实也不少了 w3cschool里面的最为简单而详细，那么这几介绍的是一些更为直接的应用。 本文目录: 1.使用标签2.加上一些必要参数3.自动播放或自动加载4.规范播放器 第一步：使用标签 使用的方法很简单，就是一句代码：代码如下: 第二步：加上一些必要的参数，比如播放...
HTML5 代表未来；W3C ( World Wide Web Consortium, 万维网联盟) 已经放弃 XHTML，从而使 HTML5 成为正式标准并得到认可。 HTML5 是下一代的 HTML。HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准，目标是取代现有的HTML4.01和XHTML1.0标准。它希望能够减少互联网富应用（RIA)对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API。HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变...
VG 表示可伸缩矢量图形，这是一门用于描述 2D 图形的语言，图形应用使用 XML 编写，然后 XML 由 SVG 阅读器程序呈现。 SVG 主要用于矢量类型的图表，比如饼图，X，Y 坐标系统中的二维图等等。 SVG 在 2003 年 1 月 14 日成为 W3C 推荐标准，你可以在 SVG 规范 页面中查看最新版本的 SVG 规范。 查看 SVG 文件大多数 Web 浏览器都可以显示 SVG，就像它们可以显示 PNG，GIF 以及 JPG 图形。IE 用户可能需要安装 Adobe SVG 阅读器 以便...
HTML5 究竟什么是HTML5？在W3C HTML5的常见问题中，关于HTML5是这样说明的：HTML5是一个开放的平台下开发的免费许可条款。具体来说，对这句话有以下两种理解：“指一组共同构成了未来开放式网络平台的技术。这些技术包括HTML5规范、CSS3、SVG、MATHML、地理位置、XmlHttpRequest、Context 2D、Web字体以及其他技术。这一套技术的边界是非正式的，且随时间变化的。指HTML5规范，当然也是开放式网络平台的一部分。 ”Canvas的浏览器支...
30分钟内让你明白HTML是什么，并对它有一些基本的了解。一旦入门后，你可以从网上找到更多更详细的资料来继续学习。什么是HTML【推荐教程：HTML教程】HTML是英文Hyper Text Mark-up Language（超文本标记语言）的缩写，它规定了自己的语法规则，用来表示比“文本”更丰富的意义，比如图片，表格，链接等。浏览器（IE,FireFox等）软件知道HTML语言的语法，可以用来查看HTML文档。目前互联网上的绝大部分网页都是使用HTML编写的。HTM...
随着html5的快速发展，很多学生都加入进来，那么如此具有前景的前端我们该怎么入门呢？新手在学习前端的时候要学习那些内容呢？下面我们来总结一下web前端学什么内容？前端入门需要注意什么？一：web前端学什么内容刚刚入门web前端，学习的东西有很多，比如html基础，和css样式，javascript。html和css是在一起的，学起来也是比较的简单，但是随着html5和css3的出现，让一些前端又有了新的挑战，新手可以专业的去学习html5和css3，...