canvas与svg详情以及用法

最新推荐文章于 2025-11-26 14:14:50 发布

原创最新推荐文章于 2025-11-26 14:14:50 发布 · 591 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

javaScript 专栏收录该内容

12 篇文章

订阅专栏

本文介绍了HTML5中的两种可视化技术——Canvas和SVG。Canvas是通过JavaScript在网页上进行图像绘制的画布，而SVG则是可缩放的矢量图，基于XML。两者在用途上有其不同，Canvas适用于动态图形和复杂交互，SVG则适合静态、清晰且需要缩放的图形。文章提供Canvas和SVG的用法详解链接，供读者进一步学习。

Canvas和svg是html5中支持2种可视化技术，都是可以在画布上绘制图形和放入图片。

1.canvas概念

canvas是H5新出的标签
canvas画布，利用js在网页进行绘制图像，在标签中设置宽高
如下：

<canvas
  id="c"
  width="300"
  height="200"
  style="border: 1px solid #ccc;"
></canvas>

若在css中设置宽高会对图像造成拉伸，通过.getContext(“2d”)

2.svg概念

svg可缩放矢量图，基于可扩展标记语言XML
svg用来定义网格的基于矢量的图形

二者区别：

Canvas	SVG
用JS动态生成元素（一个html元素）	用XML描述元素（类似htlm元素那样，可用多个元素来描述一个图形）
位图（受屏幕分辨率影响）	矢量图（不受屏幕分辨率影响）
不支持事件	支持事件
数据发生变化需要重绘	不需要重绘

3.具体用法参考
canvas用法详解
 svg用法详解