介绍
svgod 是一个基于 svg 的图形绘制库，相对于其他绘制库，它具有以下优点：
- 轻量级
- 容易上手
- 支持大多数浏览器
- 支持动画
安装
使用 npm 安装 svgod：
npm install svgod
使用
导入
import Svgod from 'svgod';
创建画布
<div id="container"></div>
const container = document.querySelector('#container');
const svg = new Svgod({
container: container,
width: 500,
height: 500
});绘制图形
矩形
svg.rectangle({
x: 100,
y: 100,
width: 200,
height: 100,
fill: '#ff0000'
});圆形
svg.circle({
cx: 250,
cy: 250,
r: 100,
fill: '#00ff00'
});直线
svg.line({
x1: 50,
y1: 50,
x2: 450,
y2: 450,
stroke: '#0000ff',
strokeWidth: 5
});文本
svg.text({
x: 250,
y: 250,
text: 'Hello World',
fontSize: 30,
fill: '#000000'
});动画
svgod 支持动画效果，例如让一个矩形慢慢变成圆形：
-- -------------------- ---- -------
----- ---- - ---------------
-- ----
-- ----
------ ----
------- ----
----- ---------
---
-------------
--- -----
----- -
--- --
--- -
--
--- -
--- ----
--- --
--
--------- ----
---完整实例
-- -------------------- ---- -------
--------- -----
------
------
------------ ------------
-------
------
---- ---------------------
------- ---------------------------------------
--------
----- --------- - -------------------------------------
----- --- - --- -------
---------- ----------
------ ----
------- ---
---
----- ---- - ---------------
-- ----
-- ----
------ ----
------- ----
----- ---------
---
-------------
--- -----
----- -
--- --
--- -
--
--- -
--- ----
--- --
--
--------- ----
---
----- ------ - ------------
--- ----
--- ----
-- ----
----- ---------
---
----- ---- - ----------
--- ---
--- ---
--- ----
--- ----
------- ----------
------------ -
---
----- ---- - ----------
-- ----
-- ----
----- ------ -------
--------- ---
----- ---------
---
---------
-------
-------结论
svgod 是一个简单易用的图形绘制库，可以轻松地在网页上绘制图形和动画效果。我们可以利用 svgod 制作交互式，有趣的网页。如果您对它感兴趣，不妨试试在您的网站上使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672981e8991b448e3ab1