作者:mobiledu2502894453 | 来源:互联网 | 2023-09-24 12:39
canvas通过Javascript来绘制2D图形.是逐像素进行渲染的。其位置发生改变,会重新进行绘制。canvas的使用步骤:获取元素对应的DOM对象,这是一个Canva
canvas
通过Javascript来绘制2D图形.
是逐像素进行渲染的。
其位置发生改变,会重新进行绘制。
canvas的使用步骤:
- 获取元素对应的DOM对象,这是一个Canvas对象;
- 调用Canvas对象的getContext()方法,得到一个CanvasRenderingContext2D对象;
- 调用CanvasRenderingContext2D对象进行绘图。
特点:
- 依赖分辨率
- 不支持事件处理器
- 弱的文本渲染能力
- 能够以 .png 或 .jpg 格式保存结果图像
- 最适合图像密集型的游戏,其中的许多对象会被频繁重绘
SVG
svg是指可伸缩矢量图形 (Scalable Vector Graphics),是基于可扩展标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。SVG严格遵从XML语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。
<svg width="100%" height="100%" ><circle cx="300" cy="60" r="50" stroke="#ff0" stroke-width="3" fill="red" /></svg>
区别
canvas画图基于像素点,是位图,如果进行放大或缩小会失真
svg基于图形,用html标签描绘形状,放大缩小不会失真
canvas需要js
中绘制
svg在html
中绘制
canvas无法对已经绘制的图像进行修改、操作
svg可以获取到标签进行操作
Canvas 适用于位图,高数据量高绘制频率(帧率)的场景,如动画、游戏;
SVG 适用于矢量图,低数据量低绘制频率的场景,如图形、图表;