CANVAS画布与SVG的区别
一，canvas画布···位图
<canvas> 标签定义图形，比如说图表和其他图像，您必须使用脚本来绘制图形
默认情况下 <canvas> 元素没有边框和内容。
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：
* 不要在style中给canvas设置宽高 会有位移差
二，svg···矢量图
SVG 是使用 XML 来描述二维图形和绘图程序的语言
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
SVG 代码以 <svg> 元素开始，包括开启标签 <svg> 和关闭标签 </svg> ---这是根元素
SVG 要有一个根节点，叫svg标签，就相当于html
SVG如果不设置大小，默认占用面积300*150
canvas实例：
1， 首先，找到 <canvas> 元素:
var c1=document.getElementById('c1')
2， 然后，创建 context 对象：
var ctx=c1.getContext("2d");
------------------------------------------------------------------------------------------
使用 JavaScript 来绘制图像
* fillStyle() CSS颜色，渐变，或图案--- 默认设置是#000000（黑色）
* fillRect(x,y,width,height) 方法定义了矩形当前的填充方式
* strokeRect() 绘制带边框的方块
------------------------------------------------------------------------------------------
Canvas - 路径
画线-
* moveTo(x,y) 定义线条开始坐标
* lineTo(x,y) 定义线条结束坐标
* stroke() 方法来绘制线条:
------------------------------------------------------------------------------------------
rect() 绘制方块 没有颜色背景线条
clearRect(X,Y,width,height) 清除画布
一对方法：意思开始结尾写了里面的方法只对当前有效果
save() 保存当前环境的状态。
restore() 返回之前保存过的路径状态和属性。
------------------------------------------------------------------------------------------
Canvas - 路径
画圆-
* arc(x,y,半径，起始弧度，结束弧度，旋转方向) ----弧的圆形的三点钟位置是 0 度
x,y 圆的中心的 x y坐标。
起始弧度，结束弧度 以弧度计
弧度和角度的关系：弧度 = 角度*Math.PI/180
Math.PI=180°
2*Math.PI=360°
旋转方向：顺时针（默认：false），逆时针（true）
* beginPath() 绘画开始
* closePath() 绘画结束
* stroke() 绘制线条，定义路径
------------------------------------------------------------------------------------------
画布的平移和旋转
translate(x轴偏移，y轴偏移) 平移，画布的大小位置不变 起始坐标变了
rotate(参数为弧度) 画布的旋转都是以(0,0)中心点旋转
scale() 缩放 ---就是将画布向后移动，跟人的视距就变远了，近大远小
------------------------------------------------------------------------------------------
画布中插入图片：
* drawImage(image,x,y) 把一幅图像放置到画布上
------------------------------------------------------------------------------------------
插入文字 ：
* font - 定义字体
* fillText(text,x,y) - 在 canvas 上绘制实心的文本
* strokeText(text,x,y) - 在 canvas 上绘制空心的文本
svg实例
<rect> 定义一个矩形
x="矩形的左上角的x轴"
y="矩形的左上角的y轴"
rx="x轴的半径（round元素）"
ry="y轴的半径（round元素）"
width="矩形的宽度" 必需的
height="矩形的高度" 必需的
fill-opacity 只改变填充的透明度
opacity 改变整体透明度
<circle> 定义一个圆
cx="圆的x轴坐标"
cy="圆的y轴坐标"
r="圆的半径" 必需
<ellipse> 定义一个椭圆
cx="椭圆x轴坐标"
cy="椭圆y轴坐标"
rx="沿x轴椭圆形的半径"。必需。
ry="沿y轴长椭圆形的半径"。必需。
<line> 定义一条线
x1="直线起始点x坐标"
y1="直线起始点y坐标"
x2="直线终点x坐标"
y2="直线终点y坐标"
<polygon> 定义一个包含至少三边图形
points="多边形的点。点的总数必须是偶数"。必需的。
fill-rule="FillStroke演示属性的部分"
<polyline> 定义只有直线组成的任意形状
points=折线上的"点"。必需的。
<path> 定义一个路径
d="定义路径指令" 大写表示绝对定位，小写表示相对定位。
pathLength="如果存在，路径将进行缩放，以便计算各点相当于此值的路径长度"
transform="转换列表"
下面的命令可用于路径数据：
M = moveto 开始坐标
L = lineto 结束坐标
H = horizontal lineto 沿着x轴移动一段位置
V = vertical lineto y 沿着y轴移动一段位置
Z = closepath 关闭路径
A = elliptical Arc 跟七个值
A命令：
X半径
Y半径
角度 ---针对椭圆
弧长 ---1表示大角度弧线，0为小角度弧线
方向 ---1为顺时针，0为逆时针
X 终点坐标
Y 终点坐标
<g> 用于把相关元素进行组合的容器元素
g身上的属性，子元素都会继承，但是g上的属性都必须是显现属性，不是svg元素私有的;
id="该组的名称"
fill="该组填充颜色"
opacity="该组不透明度"
<text> 定义一个文本
X 字体对于X的值，在字体的左下角
Y 字体对于Y的值
text-anchor=“middle” 居中
<image> 定义图像
x="图像的左上角的x轴坐标"
y="图像的左上角的y轴坐标"
width="图像的宽度". 必须.
height="图像的高度". 必须.
xlink:href="图像的路径". 必须.
<use> 用于复制元素XY
Xy相对于原始的元素坐标位置，不是相对于svg的(0,0)点的坐标
使用URI引用一个<G>,<svg>或其他具有一个唯一的ID属性和重复的图形元素。
复制的是原始的元素，因此文件中的原始存在只是一个参考。原始影响到所有副本的任何改变。
x="克隆元素的左上角的x轴"
y="克隆元素的左上角的y轴"
width="克隆元素的宽度"
height="克隆元素的高度"
xlink:href="URI引用克隆元素"
<animate> 随时间动态改变属性
attributeName="目标属性名称"
from="起始值"
to="结束值"
dur="持续时间"
repeatCount="动画时间将发生" indefinite 无限次
transform 准换svg中的一个属性，translate rotate scale
平移，旋转，都是以起点(0,0)svg的左上角为参考点；
css3中以元素的中心点为参考点
Canvas 与 SVG 的比较
下表列出了 canvas 与 SVG 之间的一些不同之处。
Canvas
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
- 不依赖分辨率
- 支持事件处理器
- 最适合带有大型渲染区域的应用程序（比如谷歌地图）
- 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
- 不适合游戏应用
