v客学院吧 关注:57贴子:696
  • 6回复贴,共1页

Html5 之SVG 与 Canvas 图像比拼

取消只看楼主收藏回复

本文作者:浮水,一九八网络科技V客学院资深前端工程师
“既生瑜,何生亮!”,这句话大家都耳熟能详了。今天用到HTML5 里面,竟然有了Canvas,为何还要SVG图像处理呢。其实他们并不冲突,下面我们来分析他们的使用领域(学最扎实的前端技术就来V客学院)。
SVG与Canvas都是HTML5中支持的2D图形展示技术,而且均支持向量图形,而SVG是可以收缩的矢量图形,Canvas就不行,canvas图像收缩会对图形本身有一定的影响。
两者的区别:
(1)Canvas是基于像素的,也就是说可以图片方式保存(一般是.png或者 jpg格式)


1楼2016-03-25 16:30回复
    点击Canvas图形可以另存为,保存图片:


    35楼2016-03-26 09:57
    回复
      2026-10-18 00:38:33
      广告
      不感兴趣
      开通SVIP免广告


      36楼2016-03-26 09:57
      回复
        而SVG则是基于形状的。是通过浏览器内核渲染出来的是不可以被保存为图片的。


        37楼2016-03-26 10:00
        收起回复
          (2)Canvas 是单个HTML元素,是通过JS脚本来绘制2D图形的,而SVG则是使用XML描述2D图形的然后通过JS、CSS属性来修改的。我们使用代码上看看他们的区别。
          从下面实际代码来看,SVG是通过HTML 元素设置属性来实现画圆的,Canvas 则是通过JAVASCRIPT 来获取Canvas 画图对象然后调用对象属性、方法实现画圆的,从代码量看SVG简单的多,从难易度上看SVG貌似也更有优势,那么是不是说明SVG比Canvas更好呢?


          38楼2016-03-26 10:04
          回复


            39楼2016-03-26 10:04
            回复


              40楼2016-03-26 10:04
              回复