canvas与svg相关介绍与区别
一、canvas 画布
<canvas>元素用于图形的绘制，通过javascript来完成
在给canvas标签写样式时要注意：不要在style中给canvas设置宽高，会用位移差
canvas标签本身是没有绘图能力的，在绘图前，你需要在javascript中创建context对象
首先是获取：var c=document.getElementById("c")
然后创建context对象：var can=c.getContext("2d")
这样你就可以绘图了
下面就写一些属性和简单的介绍
属性1.fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。
2.strokeStyle 设置或返回用于笔触的颜色、渐变或模式。
3.lineWidth 设置或返回当前的线条宽度。
方法1.rect() 创建矩形
2.fillRect() 绘制"被填充"的矩形。
3.strokeRect() 绘制矩形（无填充）。
4.clearRect() 在给定的矩形内清除指定的像素。
5.fill() 填充当前绘图（路径）
6.stroke() 绘制已定义的路径。
7.beginPash() 起始一条路径，或重置当前路径
8.moveTo() 把路径移动到画布中的指定点，不创建线条。
9.closePash() 创建从当前点回到起始点的路径。
10.lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条。
11.arc() 创建弧/曲线（用于创建圆形或部分圆）。
12.scale() 缩放当前绘图至更大或更小。
13.rotate() 旋转当前绘图。
14.translate() 重新映射画布上的 (0,0) 位置。
15.transform() 替换绘图的当前转换矩阵。
16.font() 设置或返回文本内容的当前字体属性。
.....
二、svg 矢量图
svg指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用XML格式定义图形。svg图像可在任何的分辨率下被高质量地打印，可在图像质量不下降的情况下被放大。
svg的在html中有两种写：1.你可以直接写到body标签内 2.你可以写到你个svg格式的文件中，然后通过img标签的src属性引入。
学习svg，我们只需要学习他的内部可以写那些标签，以及这些标签的内部属性
1.<circle> 定义一个圆
属性：cx="圆的x轴坐标"
cy="圆的y轴坐标"
r="圆的半径". 必需.
2.<ellipse> 定义一个椭圆
属性：cx="椭圆x轴坐标"
cy="椭圆y轴坐标"
rx="沿x轴椭圆形的半径"。必需。
ry="沿y轴长椭圆形的半径"。必需。
3.<g> 把所有相关的元素组合起来
属性：id="该组的名称"
fill="该组填充颜色"
opacity="该组不透明度"
4.<line> 定义一条线
属性：x1="直线起始点x坐标"
y1="直线起始点y坐标"
x2="直线终点x坐标"
y2="直线终点y坐标"
5.<image> 定义图像
属性：x="图像的左上角的x轴坐标"
y="图像的左上角的y轴坐标"
width="图像的宽度". 必须.
height="图像的高度". 必须.
xlink:href="图像的路径". 必须.
6.<pash> 定义一个路径
属性：d="定义路径指令"
- M = moveto 起始点坐标
- L = lineto 相邻点坐标
- H = horizontal lineto 水平的线条，默认y轴上的值一样
- V = vertical lineto 垂直的线条，默认x轴上的值一样
- C = curveto
- S = smooth curveto
- Q = quadratic Bézier curve
- T = smooth quadratic Bézier curveto
- A = elliptical Arc 定义曲线 后面有7个值
- Z = closepath 构成闭合回路
注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。
A=elliptical Arc 后面的7个值 x半径 y半径 角度 弧长(0 劣弧 / 1 优弧 ) 方向(0 逆时针 / 1 顺时针) 终点x坐标 终点y坐标
7.<rect> 定义一个矩形
属性：x="矩形的左上角的x轴"
y="矩形的左上角的y轴"
rx="x轴的半径（round元素）"
ry="y轴的半径（round元素）"
width="矩形的宽度"。必需的。
height="矩形的高度"。必需的。
8.<text> 定义一个文本
属性：x="列表的X -轴的位置。在文本中在第n个字符的位置在第n个x轴。如果后面存在额外的字符，耗尽他们最后一个字符之后放置的位置。 0是默认"
y="列表的Y轴位置。（参考x）0是默认"
dx="在字符的长度列表中移动相对最后绘制标志符号的绝对位置。（参考x）"
dy="在字符的长度列表中移动相对最后绘制标志符号的绝对位置。（参考x）"
text-anchor="middle" 让字体居中
9.<use> 用于复制元素
属性：x="克隆元素的左上角的x轴"
y="克隆元素的左上角的y轴"
width="克隆元素的宽度"
height="克隆元素的高度"
xlink:href="URI引用克隆元素"
10.<animate> 定义动画
属性：attributeName="目标属性名称"
from="起始值"
to="结束值"
dur="持续时间"
repeatCount="动画时间将发生"
11.<polygon> 定义一个包含至少三边的图形
属性：points="多边形的点。点的总数必须是偶数"。必需的
fill-rule="FillStroke演示属性的部分"
12.<polyline> 定义只有直线组成的任意形状
属性：points=折线上的"点"。必需的。
三、canvas和svg的区别
SVG 是一种使用 XML 描述 2D 图形的语言。
Canvas 通过 JavaScript 来绘制 2D 图形。
SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
| Canvas | SVG |
| 依赖分辨率 | 不依赖分辨率 |
| 不支持事件处理器 | 支持事件处理器 |
| 弱的文本渲染能力 | 最适合带有大型渲染区域的应用程序(比如谷歌地图) |
| 能够以.png或.jpg格式保存结果图像 | 复杂度高会减慢渲染速度(任何过度使用DOM的应用都不快) |
| 最适合图像密集型的游戏，其中的许多对象会被频繁重绘 | 不适合游戏应用 |
QQ: 2239081756
