Canvas和SVG的区别

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

一.Canvas 和 SVG 简介

1.什么是Canvas？

Canvas 是H5新出来的标签<canvas></canvas>

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

在标签中给上宽高：<canvas width="800" height="800"></canvas>   不用加单位

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

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

2.什么是SVG？

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

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

二.Canvas 和 SVG 区别

1: 绘图方式:
Canvas使用JavaScript AP1，通过在画布上绘制像素来创建图形。提供了对像素级别的控制，可以实现复杂的图形和动画效果
SVG使用XML语法描述图形，它是一种基于矢量路径的矢量图形格式，可以缩放而不失真。

2:
图形类型:
。Canvas主要用于绘制位图图形，即像素级别的绘制。它可以处理图像处理、动画等复杂的像素级别操作。
SVG主要用于绘制矢量图形，如线条、曲线、形状等。它提供了直观的路径和形状描述，使得图形可以无损缩放，并且适用于响应式设计。

3
渲染方式:
。Canvas的图形是实时绘制的，它每次绘制都会直接作用于像素，因此在复杂的场景下可能会造成性能负担。
。SVG的图形是基于DOM的矢量对象，有更好的文档结构和可访问性，并且可以通过CSS和JavaScript进行样式和交互的控制，
交互性:

A:
。由于Canvas是基于像素的，它需要手动处理交互事件，如鼠标点击、移动等.
。SVG提供了内置的DOM结构和事件处理机制，使得对图形的交互操作更加方便