• 前端绘图方式Canvas和SVG的区别


    Canvas和SVG是html5中支持2种可视化技术,都是可以在画布上绘制图形和放入图片。下面来介绍和分析一下他们。

    一.Canvas 和 SVG 简介

    1.什么是Canvas?

    Canvas 是H5新出来的标签

    Canvas画布,利用JavaScript在网页绘制图像

    在标签中给上宽高: 不用加单位

    如果在css中给宽高 会对图像造成拉伸 (默认宽高300px*150px)

    通过过去绘制工具 .getContext(“2d”) 来在画布中绘制图形

    2.什么是SVG?

    SVG 可缩放矢量图形(Scalable Vector Graphics),基于可扩展标记语言XML 出来的时间比较老

    SVG 用来定义用于网格的基于矢量的图形

    二.Canvas 和 SVG 区别

    1.绘制的图片格式不同

    Canvas 的工具getContext 绘制出来的图形或传入的图片都依赖分辨率,能够以 .png 和 .jpg格式保存存储图像,可以说是位图

    SVG 可以在H5中直接绘制,但绘制的是矢量图

    由于位图依赖分辨率,矢量图不依赖分辨率,所以Canvas和SVG的图片格式的不同实际上是他们绘制出来的图片的格式不同造成的。

    2.Canvas不支持事件处理器,SVG支持事件处理器

    Canvas 绘制的图像 都在Canvas这个画布里面,是Canvas的一部分,不能用js获取已经绘制好的图形元素。

    如下:
    在这里插入图片描述

    在这里插入图片描述

    在控制台中可以看到canvas标签里面是没有单独的长方形存在的。

    Canvas就像动画,每次显示全部的一帧的内容,想改变里面某个元素的位置或者变化需要在下一帧中全部重新显示。

    而SVG绘图时,每个图形都是以DOM节点的形式插入到页面中,可以用js或其他方法直接操作

    如下:在这里插入图片描述

    效果:
    在这里插入图片描述

    可以看出svg 标签下面多了两个矩形的标签

    下面我们来操作新出来的矩形标签:

    给上rect标签id r1 和 r2

    获取元素

    var rect1 = document.getElementById(“r1”);

    var rect2 = document.getElementById(“r2”);

    改变元素的填充颜色:

    rect1.style.fill = “yellow”;

    rect2.style.fill = “pink”;

    效果:

    在这里插入图片描述

    SVG 中 每个被绘制的图形都被视为对象,如果SVG对象的属性发生变化,那么浏览器能够自动重现图形。

    3.适用范围不同

    由于Canvas 和 SVG 的工作机制不同,

    Canvas是逐像素进行渲染的,一旦图形绘制完成,就不会继续被浏览器关注。而SVG是通过DOM操作来显示的。

    所以Canvas的文本渲染能力弱,而SVG最适合带有大型渲染区域的应用程序,比如地图。

    而Canvas 最适合有许多对象要被频繁重绘的图形密集型游戏。

    而SVG由于DOM操作 在复杂度高的游戏应用中 会减慢渲染速度。所以不适合在游戏应用。

    来源:https://blog.csdn.net/weixin_43688414/article/details/85014152

  • 相关阅读:
    BrowserSync,自动刷新,解放F5,去掉更新提示
    js获取手机系统语言
    块元素,行内元素,行内块区别
    原生js判断某个元素是否有指定的class名的几种方法
    如何实现调用console.log(‘good’.repeat(3))时输出goodgoodgood?
    数组如何去除重复数据,只保留一条
    Sentinel笔记-Flow流控规则
    sentinel笔记 NodeSelectorSlot,ClusterBuilderSlot
    Sentinel笔记--Slotchain
    Sentinel笔记-核心类
  • 原文地址:https://www.cnblogs.com/qixidi/p/10190183.html
Copyright © 2020-2023  润新知