LeaferUI之HTML5 Canvas 2D 图形UI绘图框架安装示例

649 ℃

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>

简洁轻量的 HTML5 Canvas 2D 图形 UI 绘图框架——LeaferUI

LeaferUI中文文档官网介绍

标签: HTML5 Canvas 2D 图形, LeaferUI, UI绘图框架

上面是“LeaferUI之HTML5 Canvas 2D 图形UI绘图框架安装示例”的全面内容,想了解更多关于 前端知识 内容,请继续关注web建站教程。

当前网址:https://m.ipkd.cn/webs_12708.html

声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!

生活小工具

收录了万年历、老黄历、八字智能排盘等100+款小工具!生活小工具
mysql有哪些语法可以实现合并查询
一款用于在网页上生成五彩纸屑特效的JavaScript库——Canvas Confetti
推荐一款代码图片生成器——UShare(代码分享工具)
dedeCMS使用list标签调用文章日期的方法
如何在Git中将文件恢复到某个指定版本?