学习笔记：SVG和Canvas

SVG

SVG 与 Flash 类似，都是用于二维矢量图形，二者的区别在于，SVG 是一个 W3C 标准，基于 XML，是开放的。因为是 W3C 标准，SVG 与其他的 W3C 标准，比如 CSS、DOM 和 SMIL 等能够协同工作。

SVG是W3C XML的分支语言之一，用于标记可缩放的矢量图形。即便浏览器实现了一些规范，但实现速度完全不能和它的竞争技术相比，它的竞争技术比如说HTML Canvas和Adobe Flash，都已经实现了成熟的应用接口。但是SVG也有自身的优点，比如它实现了DOM接口（比Canvas方便），不需要安装第三方插件就可以在浏览器中使用（比Flash方便）。当然，是否使用SVG还要取决于你要实现什么。

SVG的元素和属性必须按标准格式书写，因为XML是区分大小写的（这一点和html不同）。

SVG里的属性值必须用引号引起来，就算是数值也必须这样做。

通过 <img>元素嵌入SVG，你只需要在 src 属性中引用它。你将需要一个height或width属性（或者如果您的SVG没有固有的宽高比）。

优点

• 快速，熟悉的图像语法与alt属性中提供的内置文本等效。
• 可以通过在<a>元素嵌套<img>，使图像轻松地成为超链接。

缺点

• 无法使用JavaScript操作图像。
• 如果要使用CSS控制SVG内容，则必须在SVG代码中包含内联CSS样式。 （从SVG文件调用的外部样式表不起作用）
• 不能用CSS伪类来重设图像样式（如:focus）。

你还可以在文本编辑器中打开SVG文件，复制SVG代码，并将其粘贴到HTML文档中。

优点

• 将 SVG 内联减少 HTTP 请求，可以减少加载时间。
• 您可以为 SVG 元素分配class和id，并使用 CSS 修改样式，无论是在SVG中，还是 HTML 文档中的 CSS 样式规则。 实际上，您可以使用任何 SVG外观属性 作为CSS属性。
• 内联SVG是唯一可以让您在SVG图像上使用CSS交互（如:focus）和CSS动画的方法（即使在常规样式表中）。
• 您可以通过将 SVG 标记包在<a>元素中，使其成为超链接。

缺点

• 这种方法只适用于在一个地方使用的SVG。多次使用会导致资源密集型维护（resource-intensive maintenance）。
• 额外的 SVG 代码会增加HTML文件的大小。
• 浏览器不能像缓存普通图片一样缓存内联SVG。
• 您可能会在<foreignObject> 元素中包含回退，但支持 SVG 的浏览器仍然会下载任何后备图像。你需要考虑仅仅为支持过时的浏览器，而增加额外开销是否真的值得。

最后SVG可以通过JavaScript动态创建并注入到HTML DOM中。 这样具有一个优点，可以对浏览器使用替代技术，在不能解析SVG的情况下，可以替换创建的内容。

 <svg version="1.1"
      baseProfile="full"
      width="300" height="200"
      xmlns="http://www.w3.org/2000/svg">
   <rect width="100%" height="100%" fill="red" />
   <circle cx="150" cy="100" r="80" fill="green" />
   <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
 </svg>

绘制流程包括以下几步：

1. 从svg根元素开始：
• 应舍弃来自 (X)HTML的doctype声明，因为基于SVG的DTD验证导致的问题比它能解决的问题更多。
• 属性version和属性baseProfile属性是必不可少的，供其它类型的验证方式确定SVG版本。
• 作为XML的一种方言，SVG必须正确的绑定命名空间 （在xmlns（ns即namespace）属性中绑定）。
2. 绘制一个完全覆盖图像区域的矩形 <rect/>，用fill把背景颜色设为红色。
3. 一个半径80px的绿色圆圈<circle/>绘制在红色矩形的正中央 （向右偏移150px，向下偏移100px）。
4. 绘制文字“SVG”。文字被填充为白色， 通过设置居中的锚点把文字定位到期望的位置：在这种情况下，中心点应该对应于绿色圆圈的中点。还可以精细调整字体大小和垂直位置，确保最后的样式是美观的。

注意结束标记“/>”，也可以用和html中一样的结束标记。

Canvas

基本用法

<canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素。

Canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px）。但是，可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。注意，<canvas>直接写在HTML中的width和height，与在CSS中写给<canvas>的width和height是不一样的，后者相当于在HTML中写style=’width: …’，而且前者可以不带单位（不带时单位也是px）。元素本身的属性和CSS是不一样的。

<canvas> 看起来和 <img> 元素很相像，唯一的不同就是它并没有 src 和 alt 属性，以及需要结束标签(</canvas>)。如果你绘制出来的图像是扭曲的, 尝试用width和height属性为<canvas>明确规定宽高，而不是使用CSS。

<canvas>元素很容易定义一些替代内容。我们只是在<canvas>标签中提供了替换内容。不支持<canvas>的浏览器将会忽略容器并在其中渲染后备内容。而支持<canvas>的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas。

canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。<canvas> 元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。对于2D图像而言，如本教程，你可以使用’2d’。

替换内容是用于在不支持 <canvas> 标签的浏览器中展示的。通过简单的测试getContext()方法的存在（即canvas.getContext），脚本可以检查编程支持性。

绘制形状

不同于SVG，HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径。

canvas提供了三种方法绘制矩形：fillRect(x, y, width, height)绘制一个填充的矩形，strokeRect(x, y, width, height)绘制一个矩形的边框，clearRect(x, y, width, height)清除指定矩形区域，让清除部分完全透明。不同于的路径函数（path function），以上的三个函数绘制之后会马上显现在canvas上，即时生效。

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。使用路径绘制图形需要一些额外的步骤。

1. 生成路径的第一步叫做beginPath()。
2. 第二步就是调用函数指定绘制路径（路径构造的第一条命令通常是moveTo（），指定起点，我们也能够使用moveTo()绘制一些不连续的路径）
3. 第三，就是闭合路径closePath(),不是必需的。
4. 一旦路径生成，你就能通过描边stroke()或填充fill()路径区域来渲染图形。

以下是所要用到的函数：

beginPath()：新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath()：闭合路径之后图形绘制命令又重新指向到上下文中。

stroke()：通过线条来绘制图形轮廓。

fill()：通过填充路径的内容区域生成实心的图形。

注意：当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

绘制直线，需要用到的方法lineTo()。lineTo(x, y)绘制一条从当前位置到指定x以及y位置的直线。

变量名ctx意思是context。

绘制圆弧或者圆，我们使用arc()方法。arc(x, y, radius, startAngle, endAngle, anticlockwise)画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

Math.PI是圆周率Π。

同样，画矩形也有用路径的方法——rect()方法。rect(x, y, width, height)绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。当该方法执行的时候，moveTo()方法自动设置坐标参数（0,0）。也就是说，当前笔触自动重置回默认坐标。

使用样式和颜色

如果我们想要给图形上色，有两个重要的属性可以做到：fillStyle 和 strokeStyle。

注意: 一旦您设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或 strokeStyle 的值。

绘制文本

canvas 提供了两种方法来渲染文本:fillText(text, x, y)在指定的(x,y)位置填充指定的文本；strokeText(text, x, y [, maxWidth])在指定的(x,y)位置绘制空心文本。

设置字体大小用font属性，想要指定大小，则同时还要指定字体，默认的是 10px sans-serif。