更新时间:2022-08-12 21:46:48
前端学习路线一条龙【内含入门到进阶到高级精选资源】无套路获取!!!
前端小菜鸡之菜鸡互啄,公众号:前端开发爱好者xy哥怒肝,前端学习路线一条龙【内含入门到进阶到高级精选资源】无套路获取!!!
Canvas
技术的诞生可谓是让绘图技术如虎添翼,本文将推荐一系列Canvas图形绘制、流程图、组织图、甘特图、全景图、3D库、VR/AR、图像编辑
等方面的库,希望助你在Canvas绘图时寻得一把趁手的利器。
图形绘制是Canvas中最基本的内容,但是Canvas本身提供的api比较基础,开发起来低效。而且也缺少完整的事件系统、区域监测、缓存等等。下面让我们来看几款高效的图形处理库吧。
简介:Konva
是一个 HTML5 Canvas JavaScript 框架, 通过扩展 Canvas 的 2D Context 让桌面端和移动端Canvas支持交互性,使其支持高性能动画、过渡、节点嵌套、分层、过滤、缓存、事件处理等等。
除上述之外,文档相对友好,但也仅仅是相对于同类库的文档友好那么一滴滴,社区有维护一个中文文档。
简介:「Fabric.js」是一个可以轻松处理 HTML5 Canvas元素的框架,使得Canvas元素支持「交互式对象模型」,同时也是一个「SVG-to-Canvas」和「Canvas-to-SVG」的解析器
fabricjs是和konva同类型但是比konva更老牌的一个的Canvas库更多示例如下图所示:
市面上图像编辑的软件有很多,像大家所熟知的PS、sketch、axure、激萌、剪映
等等。那么如果我们想开发类似的软件,有没有可以使用的库或者参考的开源软件呢?
简介:miniPaint - 在线版的PS。PS这款软件大家都不陌生,web版本的如何呢?请看下图:
简介:DarkroomJS - 基于Fabricjs的浏览器端可扩展的图像编辑工具
简介:fabric-brush - 基于Fabric.js的Canvas笔刷工具
简介:fabricjs-image-editor-origin - Fabricjs图像编辑器简介:glitch-canvas - 给画布元素添加故障效果
简介:animockup - 在浏览器中创建动画模型,并导出为视频或动画GIF
物理引擎使用质量、速度、摩擦力和空气阻力等变量,模拟了一个近似真实的物理系统,为刚性物体赋予真实的物理效果,比如重力、旋转和碰撞等效果,让物体的行为表现的更加趋向真实。例如,守望先锋的英雄在跳起时,系统所设置的重力参数就决定了他能跳多高,下落时的速度有多快,子弹的飞行轨迹等等。
简介:「matter.js」是一个用于 Web 的 JavaScript 2D 物理引擎库
matter.js相较于老牌的 Box2D 引擎库更为轻量级(压缩版仅有 87 KB),并且在性能和功能方面也不逊色。
工业软件开发,一直是软件领域复杂而又重要的一环。其对技术人的要求要是更高的,下面看看有哪些可以辅助我们快速开发的库或者参考的场景吧。
简介:「gojs」是一款可以非常方便的开发交互式流程图、组织结构图、设计工具、规划工具、可视化语言的JavaScript图表库。
简介:butterfly 一个基于JS的数据驱动的节点式编排组件库,同时适用于React/Vue2组件。
简介:wireflow 用户流程图实时协作工具。
简介:Flowy - 用于创建流程图的最小javascript库。使创建具有流程图功能的 WebApp 成为一项非常简单的任务。通可以在几分钟内构建自动化软件、思维导图工具或简单的编程平台。
简介:Workflow Designer - 基于G6和React的可视化流程编辑器。
5g的普及、虚拟现实/增强现实落地、元宇宙的火热......似乎让Canvas再度推上了技术的顶峰。下面让我来看看开发这些场景常见的Canvas库吧。
简介:Pannellum - 轻量、免费、开源的web全景查看器。
简介:Panolens.js - Panolens.js基于Three.JS,主要研究领域是全景、虚拟现实和潜在的增强现实。
简介:JS-Cloudimage-360-View 一个简单的、交互式的资源,可以用来提供您的产品的虚拟游览。
简介:A-Frame A-Frame 除了帮助您构建 360 度媒体播放器外,它还提供了许多附加功能。其他功能可帮助您增强网站的虚拟现实体验。
简介:three.js - 创建易于使用、轻量级、跨浏览器的通用3d js库。three.js就不多介绍了,大家想必都很熟悉。
简介:phoria.js - 用于在 HTML5 画布 2D 渲染器上进行简单 3D 图形和可视化的 JavaScript 库。它不使用 WebGL。适用于所有 HTML5 浏览器,包括桌面、iOS 和 Android。