学习笔记：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的状况下，能够替换建立的内容。

1 <svg version="1.1"
2      baseProfile="full"
3      width="300" height="200"
4      xmlns="http://www.w3.org/2000/svg">
5   <rect width="100%" height="100%" fill="red" />
6   <circle cx="150" cy="100" r="80" fill="green" />
7   <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
8 </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。