LeaferUI之HTML5 Canvas 2D 图形UI绘图框架安装示例
Leafer UI
是基于LeaferJS
的多彩UI绘制框架,帮助开发者快速生成图形界面。LeaferJS
是一个基于HTML5 Canvas
的2D绘图渲染引擎,在web上有着出色的绘图性能。与同类图形引擎相比,渲染时间更少,占用超低内存。
安装 Leafer UI
npm install leafer-ui
也可以直接在<script>引入
<script src="https://unpkg.com/leafer-ui"></script>
简单使用示例
<!DOCTYPE html>
<html>
<head>
<title>Demo | Leafer UI</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="https://unpkg.com/leafer-ui"></script>
</head>
<body></body>
<script>
var Leafer = LeaferUI.Leafer
var Rect = LeaferUI.Rect
var leafer = new Leafer({ view: window })
var rect = new Rect({
x: 100,
y: 100,
width: 200,
height: 200,
fill: '#32cd79',
draggable: true,
})
leafer.add(rect)
</script>
</html>
以上是编程学习网小编为您介绍的“LeaferUI之HTML5 Canvas 2D 图形UI绘图框架安装示例”的全面内容,想了解更多关于 前端知识 内容,请继续关注编程基础学习网。