总结:canvas与svg的区别

Posted mo123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了总结:canvas与svg的区别相关的知识,希望对你有一定的参考价值。

canvas(画布{位图})

  1.最好不要在style中给canvas设置宽高,会有位移差

  2.canvas样式:

  .技术图片

  绘制矩形:

    fillRect()  绘制一个填充的方块,默认颜色是黑色

    strokeRect()绘制带边框的方块

  绘制线条

    moveTo()绘制线段的起点

    lineTo()绘制线段的邻点

    每个线条只能有一个moveTo可以有多个lineTo()

    stroke()绘制线段

    beginPath(),closePath()二者同时出现,将绘制路径闭合(起始点,结尾点首尾相连)

    Rect()绘制方块

    clearRect(0,0,width,height)清除画布

    can.save(),can.restore()二者成对出现,中间的属性样式只影响内部,不影响外部

  画圆

    can.arc(200,200,50,0,Math.PI,true)

    200,200是圆心坐标··50是半径··0是起始弧度··Math.PI是结束弧度··true是逆时针方向

    注意:角度有正负之分,顺时针==》正,逆时针==》负

  画布的平移和旋转

    平移translate··画布大小位置不变,起始坐标改变,相当于坐标平移

    can.translate(100,100);

    can.fillRect(-100,-100,50,50)

    rotate()画布的旋转都是以00位起始点为中心点旋转的

    scale(0.5,0.5)

    画布的缩放:将画布向后移动,跟人的视距变远,近大远小

  画布中插入图片

    var img=new Image;

    img.src="01.jpg"

    img.onload=function(){

      can.drawImage(img,10,20,160,200)

    }

    console.log(img)

  插入字体

    can.font="30px impact";

    can.textAlign="center"

    can.fillText(“what”,200,200)

    can.strokeText("what",200,200)

  200,200字体的起始点,默认在起始点在字体的左下角

svg(矢量图)

  svg在使用前必须要有一个相当于html的根节点,叫svg标签,使用xml格式绘制图形,默认占用面积为300*150

  <svg xmlns="http://www.w3.org/2000/svg" version="1.1">

  </svg>

  定义矩形

    Rect标签:属性有

      width:宽,height:高··x,y起点的坐标,rx,ry相当于border-radius ``fill:填充,stroke-width:边框宽,stroke-style:边框样式

      style="fill-opacity:0.2;stroke-opacity:0.5;opcity:0.5"

      fill-opacity和opacity的区别 fill-opacity只改变填充色的透明度 opacity改变fill和stroke的透明度都改变

  定义圆

    circle:

      cx,cy定义圆心的坐标,r定义半径

  定义椭圆

    ellipse:

      cx,cy定义圆心的坐标,rx定义椭圆x轴半径,ry定义椭圆y轴半径

  定义直线

    line:

      x1,y1定义起始坐标···x2,y2定义结束坐标,必须结合stroke绘制

  定义多边形

    polygon:

      points="x1,y1 x2,y2 x3,y3"写多边行的坐标    fill-rule="" 是否清除重叠部分

  定义折线

    polyline:

      point=“”折点的坐标

  定义路径

    path d=""

      技术图片

      M是起点坐标···L是相邻点坐标···Z让路径构成闭合回路

      技术图片

      技术图片

      H代表水平的线条,默认y轴上的值;

      技术图片

      V代表垂直的线条,默认x轴上的值

      A后面跟有七个值(x:半径 y:半径 角度 弧长(0:小弧,1:大弧)方向(0:逆时针,1:顺时针) 终点x坐标 终点y坐标)

    

  Transfrom 转换

    svg中的一个属性 translate  rotate scale

    平移 旋转 都是以起点0 0(svg的左上角)点为参考点 而css3中以元素的中心点为参考点

  G 用于将相关元素进行组合

    G身上的属性 子元素都会继承 但是g上的属性都必须是显现属性 不是svg元素私有的 比如 g 上的圆心坐标不行

  Text 用于定义文本

     x:x轴坐标 y:y轴坐标(xy的值在字体的左下角)

     Text-anchor=”middle” 让字体居中

  Image 绘制图片

      技术图片

  Use用于复制元素 

    Xy 是相对于原始的元素的坐标位置 不是相对svg的00点坐标

  Animate

    写在需要动画元素的中间

    attributeName  form to dur repeatCount=”indefinite”(无限次)

 

 

 

 

什么是 Canvas?

HTML5 的 canvas 元素使用 javascript 在网页上绘制图像。

画布是一个矩形区域,您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素

向 HTML5 页面添加 canvas 元素。

规定元素的 id、宽度和高度:

<canvas id="myCanvas" width="200" height="100"></canvas>

通过 JavaScript 来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript 使用 id 来寻找 canvas 元素:

var c=document.getElementById("myCanvas");

然后,创建 context 对象:

var cxt=c.getContext("2d"); 

getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形:

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75); 

fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。

fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸。

理解坐标

上面的 fillRect 方法拥有参数 (0,0,150,75)。

意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。

如下图所示,画布的 X 和 Y 坐标用于在画布上对绘画进行定位。

技术图片

什么是SVG?

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用于定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
  • SVG 是万维网联盟的标准

SVG 的优势

与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:

  • SVG 图像可通过文本编辑器来创建和修改
  • SVG 图像可被搜索、索引、脚本化或压缩
  • SVG 是可伸缩的
  • SVG 图像可在任何的分辨率下被高质量地打印
  • SVG 可在图像质量不下降的情况下被放大

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。

把 SVG 直接嵌入 HTML 页面

在 HTML5 中,您能够将 SVG 元素直接嵌入 HTML 页面中:

实例 

技术图片
<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>
技术图片

结果:

技术图片

 

Canvas 与 SVG 的比较

Canvas

通过javascript来绘制2d图形

是HTML5提供的新元素<canvas>

位图(标量图),放大或改变尺寸会失真;逐像素进行渲染,依赖分辨率

弱的文本渲染能力(因为放大会失真)

能够以.png或.jpg格式保存结果图像;能够引入.png或.jpg格式的图片

不支持事件处理器(一旦图形绘制完成,他就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景需要重新绘制,包括任何或许已被图形覆盖的对象。)

不能被引擎抓取

最适合图像密集的游戏,其中的许多对象被频繁重绘

Svg

是一种使用XML描述2d图形的语言

历史久远,并不是HTML5转悠的标签

矢量图,放大或改变尺寸不会失真,不依赖分辨率

最适合带有大型渲染区域的程序,比如谷歌地图(放大不会失真)

不能以.png或.jpg格式保存结果图像;不能引入.png或.jpg格式的图片

支持事件处理svg和dom中的每个元素都是可以使用的,您可以为每个元素附加javasript事件处理器,每个被绘制的图形均被视为对象,如果svg对象属性变化,那么浏览器能够自动重现图形

可以被引擎抓取

不适合游戏应用

      

  

    

 

以上是关于总结:canvas与svg的区别的主要内容,如果未能解决你的问题,请参考以下文章

Canvas 和 SVG 有什么区别?

CANVAS画布与SVG的区别

canvas 与svg 的区别

HTML5——Canvas 与 SVG 区别

canvas与svg的区别

echarts 底层基于canvas ,highcharts 底层基于svg;canvas 与svg 的区别