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 的应用都不快）
• 不适合游戏应用

原文：https://www.cnblogs.com/xiaotaiyangye/p/10901884.html