一个国产的 Canvas 2D 图形渲染引擎--LeaferJS

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量396 收藏 1
点赞数
文章标签： 图形渲染 javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49775519/article/details/131879870
版权

简介

官网：https://www.leaferjs.com/ui/guide/

今天我要向大家推荐的是一个免费开源的国产的 Canvas 2D 图形渲染引擎--LeaferJS。LeaferJS是一款HTML5 Canvas 2D图形渲染引擎，拥有瞬间创建100万 个图形的超强能力。相较于同类型产品它有着以下几点优势：

  1. 超快的创建速度，它可以在1.5秒内创建出100万个可交互矩形。相比于同类产品，LeaferJS的创建速度提升了10倍

  2. 极致的性能，LeaferJS创建100万个可交互矩形使用的内存约为350MB，远低于同类引擎。除此之外，LeaferJS的代码量也是极少的

  3. 丰富的表现力，LeaferJS提供了简洁易用的API，能够帮助开发者使用最少的代码实现包括渐变、图案填充、内外阴影、模糊等特性

简单应用

接下来就让我演示一下LeaferJS的一些简单应用，使用LeaferJS提供的API可以让复杂图形的绘制变得十分便捷

矩形

不同圆角的矩形代码

圆形

圆环扇形代码

多边形

 

 三边形代码

其他

 

Pen代码

渐变代码

 

以上就是我给大家带来有关LeaferJS的分享。

参考文章：LeaferJS 发布：开源、性能强悍的2D图形库icon-default.png?t=N6B9https://blog.csdn.net/yanbingjx/article/details/131468723?ops_request_misc=&request_id=&biz_id=102&utm_term=leaferjs&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-131468723.142^v90^control,239^v3^control&spm=1018.2226.3001.4187

weixin_49775519
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
基于HTML5Canvas的轻量级游戏引擎Laro.zip
07-19
随着html5 相关技术的兴起，因其跨平台的特性，和标准的日益完善。html5相关技术越来越多的被应用到前沿app的开发中，尤其是html5 小游戏的开发。 Laro 是一个基于html5 canvas的用于平面2d或者2.5d游戏制作的轻量级游戏引擎。 因为当前canvas作为画布形态的dom元素，并提供了大量关于矢量图以及texture绘制的api，但是由于其本身提供的api太过于底层，在类似游戏这一类交互性，逻辑性较为复杂的app时。需要开发者编写大量底层的api来实现本身的业务逻辑。 Laro出现的目的是为了简化使用canvas制作游戏时的api调用。同时提供了一套“有限状态机”的开发模式，这种模式在对于游戏这一类的典型的“事件驱动”的模型的开发上。能够很好的做到模块间的低耦合，利于开发者梳理整个开发逻辑。 Laro 游戏引擎目前已经完成了游戏开发中所需要的模块和api的封装，并有一些实际的Demo和TestCase供使用者参考。而且随后会结合这个引擎整理出一套用于html5 小游戏开发的可视化编辑工具。 旨在帮助开发者更快更容易的搭建一款小游戏为目的。 目前已经开源到github （https://github.com/AlloyTeam/Laro） 我们团队希望通过Laro的不断完善，能够帮助更多的html5 小游戏开发者以更快的速度，更优的质量完成 html5小游戏 产业化的开发。 Version Log 0.1 - 基础模块搭建 0.2 - 融入jcanvas，配合鼠标事件处理 0.3 - 加强状态机模块 查看以下demo最好使用chrome  : ) http://hongru.github.com/proj/laro/examples/emberwind/ http://hongru.github.com/proj/laro/examples/typeshot/index.html http://hongru.github.com/proj/laro/examples/jxhome/ http://heroes.github.com/world-of-heroes/development/
LeaferUI - 性能强悍、简洁轻量的 HTML5 Canvas 2D 图形 UI 绘图框架，用于 web 端在线图形设计、图表、白板、数据可视化等场景
那些免费的砖
08-10 979
最近想做一个轻巧的在线画册和海报设计工具，最近发布的 LeaferUI 特别适合这样的场景。
cax:HTML5 Canvas 2D渲染引擎-小程序，小游戏以及Web通用Canvas渲染引擎
04-01
English | 卡克斯 HTML5 Canvas 2D渲染引擎 特征 简单的API，轻巧和高性能 支持PC和Mobile Canvas 2D渲染以及鼠标和触摸事件 支持元素和DOM之类的元素管理事件 图灵完整的组套系统 支持剪辑和剪辑转换 内置文本，位图，子画面，图形和形状 支持渲染 支持 内置图像加载器 内置跨平台运动库 微信游戏演示 演示版 微信应用演示 文件 入门 通过npm或CDN获取cax： npm i cax 用法： import cax from 'cax' const stage = new cax . Stage ( 200 , 200 , 'body' ) cax . loadImgs ( { imgs : [ './wepay-diy.jpg' ] , complete : ( imgs ) => { const img = imgs [
elCanvas一种轻量级动画引擎可在Canvas上制作动画
08-11
elCanvas 一种轻量级动画引擎，可在Canvas上制作动画
3D模型导入 CanvasMatrix.js引擎 demo(一)
03-21
NULL 博文链接：https://wjlgryx.iteye.com/blog/965644
使用 Leaflet.js 创建地图的入门指南
qq_39652397的博客
03-10 6080
Leaflet.js 是目前最流行的映射库之一。它是一个灵活、轻量级的开源 JavaScript 库，用于创建交互式地图。 Leaflet 是一个用于呈现地图数据的框架。数据以及底图图层必须由开发人员提供。地图由切片图层以及浏览器支持、默认交互性、平移和缩放功能组成。您还可以添加更多自定义图层和插件，以及 Leaflet 中的所有映射。该地图库将您的数据转换为地图图层，并提供出色的支持，使其成为大多数开发人员的首选。它在主要的桌面和移动平台上运行良好，使其成为移动和大屏幕地图的完美 JavaScript
掌握高效绘制地图的利器——LeafletJs
Shids_的博客
04-10 4388
掌握高效绘制地图的利器——LeafletJs
leaflet.js_Leaflet.js是您将找到的最简单的地图库
cune1359的博客
06-30 4034
Google Maps当然是Web设计人员中最受欢迎的嵌入式地图小部件 。 但是，如何添加自定义功能（例如工具提示和大头针标记）呢？ 在这里，像Leaflet.js这样出色的库可以帮助很多人。 这是一个完全免费的开源项目，最初由Mapbox的一个叫Vladimir Agafonkin的人创建。 从那时起，Leaflet逐渐发展壮大，包括来自世界各地的数十名贡献者 。 另请阅读： 如...
浅谈 Canvas 渲染引擎设计
程序员成长指北
03-17 837
大厂技术高级前端Node进阶点击上方程序员成长指北，关注公众号回复1，加入高级Node交流群前言介绍一下社区几个比较有代表性的 Canvas 渲染引擎的设计原理。用过 Canvas 的都知道它的 API 比较多，使用起来也很麻烦，比如我想绘制一个圆形就要调一堆 API，对开发算不上友好。为了解决这个痛点，诞生了例如 PIXI、ZRender、Fabric 等 Canvas 库，对 Can...
超快的2d渲染引擎支持webgl和canvas渲染让游戏制作变得超级容易
08-10
超快的2d渲染引擎，支持webgl和canvas渲染，让游戏制作变得超级容易
node-canvas-webgl:node-canvas 和 headless-gl 的集成
07-23
节点画布-webgl 和集成。 演示： 与三个js const fs = require ( 'fs' ) ; const THREE = require ( 'three' ) ; const GIFEncoder = require ( 'gifencoder' ) ; const { createCanvas } = require ( '../lib' ) ; const width = 512 , height = 512 ; const scene = new THREE . Scene ( ) ; const camera = new THREE . PerspectiveCamera ( 75 , width / height , 0.1 , 1000 ) ; const canvas = createCanvas ( width , height ) ; con
基于canvas 2D实现微信小程序自定义组件-环形进度条
06-11
基于canvas 2D(高性能)实现微信小程序自定义组件-环形进度条 可定义大小,颜色,渐变等,也可自行扩展更多属性
canvas-barrage:一个基于canvas的弹幕系统
05-25
帆布弹幕 一个基于canvas的弹幕发射器，查看 建造 安装依赖 yarn // or npm install 为es5构建 gulp build_es5 为es6构建 gulp build_es6 用法 在es5中使用 < canvas width =' 700 ' height =' 400 '> </ canvas> < script src =" ../dist/index.js " > </ script > < script > let canvasEle = document . querySelector ( 'canvas' ) let barrage = new Barrage ( canvasEle ) barrage . pushMessage ( { text : '弹幕发射，biu' } ) </ script > 在es6中使
canvas-text-editor-tutorial:使用html5 canvas的简单文本编辑器
05-25
画布文本编辑器教程 为什么要写另一个编辑器？ 令人惊讶的是，您几乎找不到关于创建适当，快速且功能完整的纯文本编辑器的信息。 所有可用的信息要么很旧，不能指示最近的趋势，要么非常含糊和无益。 我将尝试通过创建一系列教程来解决此问题，以说明文本编辑器的所有重要方面，同时使用HTML5 canvas和许多JavaScript代码创建可用的应用程序。 以下是按优先级排列的编辑器功能要求列表： 键盘光标导航和选择； 鼠标光标导航和选择； 复制和粘贴支持； 简单的搜索和替换； 行号。 这些是技术要求： 足够快以处理至少100 kb的文本； 没有外部依赖性； 在所有现代浏览器中均可使用； 使用BDD或TDD构建。 我不打算具有以下任何功能来使任务更切合实际，因为这些主题中的每一个都有足够的问题来撰写有关以下内容的书： 支持RTL文本，象形文字和垂直文本； 搜索; 语法高
基于js与canvas的物理引擎
12-25
基于canvas和javascript的物理引擎
【QT教程】QT6图形渲染与OpenGL编程
QT界面开发界面美化
04-20 1008
QT6图形渲染概述QT6图形渲染概述QT6是Qt Company发布的一个非常重要版本的Qt框架，该框架广泛应用于软件开发领域，特别是在跨平台桌面应用程序的开发中。QT6带来了很多新特性和改进，其中图形渲染方面的改进尤为显著，这主要体现在对OpenGL的集成和支持上。QT6图形渲染框架QT6图形渲染框架基于Qt Quick和渲染引擎的全新设计，提供了更加高效和现代的图形渲染解决方案。它不仅支持传统的2D图形渲染，还支持基于OpenGL的3D图形渲染。
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 363
步骤很详细，直接上教程……
【解决NodeJS项目无法在IDEA中调试的问题】使用JetBrains IDEA 2023 调试nodejs项目
宅斗士的博客
04-23 367
项目采用Ant Design Pro + React，使用前后端分离开发方式，后端可以很容易的打断点调试，但是前端用到了React脚手架，在IDEA中加了调试断点，但是没有什么用处。
vue2---修饰符
weixin_45503872的博客
04-24 1006
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
写一个兼容canvas的谷歌渲染引擎
06-02
为了兼容canvas，我们需要使用HTML5的canvas元素来绘制图形。同时，为了实现谷歌渲染引擎的功能，我们可以使用WebGL来进行高性能的图形渲染。 具体实现步骤如下： 1. 创建一个canvas元素，并获取其上下文对象。 ```javascript const canvas = document.createElement('canvas'); const context = canvas.getContext('webgl'); ``` 2. 创建一个着色器程序，并编译链接顶点着色器和片元着色器。 ```javascript const vertexShaderSource = ` attribute vec4 a_Position; void main() { gl_Position = a_Position; } `; const fragmentShaderSource = ` precision mediump float; void main() { gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); } `; const vertexShader = gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertexShader, vertexShaderSource); gl.compileShader(vertexShader); const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, fragmentShaderSource); gl.compileShader(fragmentShader); const program = gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); ``` 3. 设置顶点数据，并绑定到顶点着色器中。 ```javascript const vertices = new Float32Array([ -0.5, -0.5, 0.5, -0.5, 0.0, 0.5, ]); const vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); const a_Position = gl.getAttribLocation(program, 'a_Position'); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position); ``` 4. 渲染图形。 ```javascript gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); gl.useProgram(program); gl.drawArrays(gl.TRIANGLES, 0, 3); ``` 这样就可以创建一个基本的兼容canvas的谷歌渲染引擎了。需要注意的是，这只是一个简单的例子，实际应用中需要考虑更多的细节和复杂的图形渲染算法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值