推荐几个Canvas优秀的开源项目

最新推荐文章于 2024-04-25 09:44:40 发布
最新推荐文章于 2024-04-25 09:44:40 发布
阅读量836 收藏 2
点赞数 1
文章标签： 开源 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxh11174/article/details/131062505
版权

索引
lucky-canvas 是一套基于 TS + Canvas 开发的【大转盘 / 九宫格 / 老虎机】抽奖插件。
Excalidraw 是一个开源的在线白板工具。
fireworks-js 是一个基于 Canvas 的动画库
canvas-editor 是一个基于 canvas/svg 的富文本编辑器
Luckysheet 是一个纯前端基于 Canvas 的类似 excel 的在线表格
canvas-confetti 是一个基于 Canvas 的库，用于在 Web 页面中实现炫酷的彩色纸屑动画效果
x-spreadsheet 是一个基于 Web(es6) canvas 构建的轻量级 Excel 开发库
QRCanvas 是一个基于 canvas 的 JavaScript 二维码生成工具
Signature Pad 是一个基于 Canvas 实现的签名库
Rough.js 基于 Canvas 的可以绘制出粗略的手绘风格的图形库。
Fabric.js是一个强大且简单的Javascript HTML5 Canvas库。
uCharts 是一款高性能的前端应用图表库
SpriteJS 是一款由360奇舞团开源的跨终端 canvas 绘图框架
oCanvas是一个JavaScript框架，用于简化HTML5 Canvas标签的使用
jCanvas 就是一个 jQuery 的绘图插件
RGraph是一个使用HTML5 Canvas标签实现的图表制作Library
Two.js 是面向现代 Web 浏览器的一个二维绘图 API
Paper.js是一款开源的矢量图形脚本框架
EaselJS 是一个封装了 HTML5 画布(Canvas) 元素的 JavaScript 库
Pixi.js 是一个 2D webGL 渲染器，提供无缝 Canvas 回退，支持主流浏览器，包括桌面和移动

lucky-canvas
官网：https://100px.net/

Github：https://github.com/buuing/lucky-canvas

基于 TS + Canvas 开发的【大转盘 / 九宫格 / 老虎机】抽奖插件， 一套源码适配多端框架 JS / Vue / React / Taro / UniApp / 微信小程序等， 奖品 / 文字 / 图片 / 颜色 / 按钮均可配置，支持同步 / 异步抽奖， 概率前 / 后端可控， 自动根据 dpr 调整清晰度适配移动端。
在这里插入图片描述

Excalidraw
官网： https://excalidraw.com/

Github： https://github.com/excalidraw/excalidraw

Excalidraw 是一个开源的在线白板工具，主要用于创建简单直观的图形和草图，支持共享和协作。

以下是 Excalidraw 的主要特点：

简单易用：具有直观简单的界面和操作方式，用户可以轻松创建和编辑图形，并实现各种设计需求。
实时协作：支持多人实时协作，用户可以与其他人一起编辑和讨论，在线完成协作任务。
自由绘制和对象管理：提供了自由绘制、文本框、箭头、线段、矩形、椭圆、图标等多种基本对象，并支持对这些对象进行移动、复制、旋转、缩放、对齐等操作，帮助用户实现更为精细的设计。
高度灵活性：支持导出为SVG、PNG、Clipboard等多种格式，方便用户进行分享和保存。

Excalidraw编辑器（npm包）支持：

  1. 免费和开源。
  2. 无限的基于画布的白板。
  3. 手绘风格。
  4. 黑暗模式。 ️
  5. 可自定义。
  6. 图像支持。
  7. 形状库支持。
  8. 本地化（i18n）支持。
  9. ️导出到PNG、SVG和剪贴板。
  10. 打开格式-将图形导出为.excalidraw json文件。
  11. 广泛的工具-矩形，圆形，菱形，箭头，线，自由绘制，橡皮擦… 箭头绑定和标记箭头。
  12. 撤消/恢复。
  13. 支持缩放和平移。

在这里插入图片描述

fireworks-js
官网： https://fireworks.js.org/

Github： https://github.com/crashmax-dev/fireworks-js

fireworks-js 是一个基于 Canvas 的动画库，用于在网页上制作烟花特效。该库的特点如下：

轻量级：fireworks-js 体积小，不依赖其他库或框架，易于集成。
易于使用：只需几行代码就可以创建出炫目的烟花特效，具有良好的可定制性和可扩展性。 动画效果逼真：fireworks-js
采用粒子系统实现烟花特效，能够模拟出逼真的爆炸、飞溅和星光等效果。
浏览器兼容性良好：可以在主流的现代浏览器上运行，支持多种设备和分辨率，包括移动端。

在这里插入图片描述

canvas-editor
在线演示： https://hufe.club/canvas-editor/

Github： https://github.com/Hufe921/canvas-editor

canvas-editor 是一个基于 canvas/svg 的富文本编辑器，类似 word。其具有以下特点：

所见即所得：类word可分页，所见即所得
轻量的数据结构：一段JSON即可呈现复杂样式
丰富的功能：支持常见富文本操作、表格、水印、控件、公式等
使用方便：官方发布核心npm包，菜单栏、工具栏可自行维护
灵活的开发机制：通过接口可获取生命周期、事件回调、自定义右键菜单、快捷键等
完全类型化的API：灵活的 API 和完整的TypeScript 类型

在这里插入图片描述

Luckysheet
官网： https://dream-num.github.io/LuckysheetDocs/

Github： https://github.com/dream-num/Luckysheet

Luckysheet 是一个纯前端基于 Canvas 的类似 excel 的在线表格，功能强大、配置简单、完全开源。其具有以下功能：

格式：样式、条件格式、文本对齐和旋转、文本截断、溢出、自动换行、多种数据类型、单元格分割样式
单元格：拖放、填充柄、多选、查找和替换、定位、合并单元格、数据验证
行和列：隐藏、插入、删除行或列、冻结和拆分文本
操作：撤消、重做、复制、粘贴、剪切、热键、格式刷、拖放选择
公式和函数：内置、远程和自定义公式
表：过滤、排序
增强功能：数据透视表、图表、评论、协同编辑、插入图片、矩阵计算、截图、复制为其他格式、EXCEL导入导出等。

在这里插入图片描述

canvas-confetti
官网： https://www.kirilv.com/canvas-confetti/

Github： https://github.com/catdad/canvas-confetti

canvas-confetti 是一个基于 Canvas 的库，用于在 Web
页面中实现炫酷的彩色纸屑动画效果。它实现了高性能、流畅的纸屑动画效果，同时兼容各种现代浏览器。提供了许多可自定义的选项，如纸屑颜色、形状、数量、速度、角度、发射器位置等，可以轻松实现不同的纸屑效果。并支持多种触发方式，如点击按钮、滚动页面、定时触发等，可根据需求进行定制。

在这里插入图片描述

x-spreadsheet
官网： https://myliang.github.io/x-spreadsheet/

Github： https://github.com/myliang/x-spreadsheet

x-spreadsheet 是一个基于 Web(es6) canvas 构建的轻量级 Excel 开发库。其具有以下特点：

轻量级：完整功能，包含所有插件。
代码打包后只不到 200kb
易于使用：如果只需要一些简单的功能可以零配置 数据驱动：调整数据非常的简单快捷

在这里插入图片描述

QRCanvas
官网： https://gera2ld.github.io/qrcanvas/

Github： https://github.com/gera2ld/qrcanvas

QRCanvas 是一个基于 canvas 的 JavaScript 二维码生成工具。其具有以下特点：

仅依赖 canvas，兼容性好 简单，仅仅是需要一些数据的配置 定制化功能丰富 支持 Node.js 方便在 React 和 Vue 中使用，支持所有主流的浏览器

在这里插入图片描述

Signature Pad
官网： http://szimek.github.io/signature_pad/

Github： https://github.com/szimek/signature_pad

Signature Pad 是一个基于 Canvas
实现的签名库，用于绘制签名。它可以在所有现代桌面和移动浏览器中使用，不依赖于任何外部库。Signature Pad提供了许多可自定义的选项，如笔画颜色、粗细、背景色、画布大小、签名格式等，可以轻松实现不同的签名风格和功能。

在这里插入图片描述

Rough.js
官网： https://roughjs.com/

Github： https://github.com/rough-stuff/rough

Rough.js 是一个轻量级的（大约 8k），基于 Canvas 的可以绘制出粗略的手绘风格的图形库。该库提供绘制线条、曲线、弧线、多边形、圆形和椭圆的基础能力，同时支持绘制 SVG 路径。除此之外，Rough.js 还提供了大量的可自定义选项，可以调整线宽、线条颜色、填充颜色、字体样式、背景颜色等，以使图形更加个性化。

在这里插入图片描述

Fabric.js
官网： http://fabricjs.com/

Github： https://github.com/fabricjs/fabric.js

Fabric.js 是一个强大且简单的Javascript HTML5 Canvas库。

Canvas提供一个好的画布能力, 但是Api不够友好。绘制简单图形其实还可以, 不过做一些复杂的图形绘制, 编写一些复杂的效果，就不是那么方便了。Fabric.js就是为此而开发，它主要用对象的方式去编写代码。

Fabric.js能做的事情

在Canvas上创建、填充图形（包括图片、文字、规则图形和复杂路径组成图形）。 给图形填充渐变颜色。 组合图形（包括组合图形、图形文字、图片等）。 设置图形动画及用户交互。 生成JSON、SVG数据等。 生成Canvas对象自带拖拉拽功能。它提供了灵活丰富的Api和可配置化参数轻松实现复杂的效果，该开源库已被许多开发者用于项目实践中，广受好评。

在这里插入图片描述

uCharts
官网： https://www.ucharts.cn/v2/#/

Gitee： https://gitee.com/uCharts/uCharts

uCharts是一款高性能的前端应用图表库，开发人员编写一套代码，可以在Web、iOS、Android以及小程序中使用。

全端全平台支持，开箱即用，支持PC、H5、小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝/京东）、Vue、Taro等更多支持canvas的框架，体积小巧、调用简单方便、性能及体验极佳。

uCharts坚持开源，遵循Apache Licence 2.0的开源协议，在项目中应用中无需支付任何费用，即可将 uCharts 应用到实际的生成环境中。

在这里插入图片描述

SpriteJS
官网： http://spritejs.com/

Gitee： https://github.com/spritejs/spritejs

SpriteJS 是一款由360奇舞团开源的跨终端 canvas 绘图框架，可以基于 canvas 快速绘制结构化 UI、动画和交互效果，并发布到任何拥有canvas环境的平台上（比如浏览器、小程序和node）。

我们知道，canvas API可以很灵活地绘制各种矢量图形到画布上，但是 canvas API 本身比较低级，比如我们要在画布中央绘制一个带有圆角的红色矩形，使用 canvas 原生的 API，需要这样：

const canvas = document.getElementById(‘paper’)const context = canvas.getContext(‘2d’)const [x, y, w, h, r] = [200, 200, 200, 200, 50]context.fillStyle = 'red’context.beginPath()context.moveTo(x + r, y)context.arcTo(x + w, y, x + w, y + h, r)context.arcTo(x + w, y + h, x, y + h, r)context.arcTo(x, y + h, x, y, r)context.arcTo(x, y, x + w, y, r)context.closePath()context.fill()
如果实现相同的效果，使用 SpriteJS 是这样写：

const scene = new spritejs.Scene(‘#container’)const layer = scene.layer()const s = new spritejs.Sprite({ anchor: 0.5, bgcolor: ‘red’, pos: [300, 300], size: [200, 200], borderRadius: 50,})layer.append(s)
Sprite 为图形创建类似于 DOM 的对象模型，因此我们可以像创建 DOM 元素一样，创建 Sprite 元素，并将它们 append 到 layer 上，从而将元素呈现到画布上。SpriteJS 有如下特点：

基于 canvas 绘制的文档对象模型

四种基本精灵类型：Sprite、Path、Label、Group 支持基础和高级的精灵属性，精灵盒模型、属性与 CSS3 具有高度一致性。
简便而强大的 Transition、Animation API 支持雪碧图和资源预加载 可扩展的事件机制 高性能的缓存策略 对 D3、Matter-js、Proton和其他第三方库友好 跨平台，支持服务端渲染、微信小程序。

在这里插入图片描述

oCanvas
官网： http://ocanvas.org/

Gitee： https://github.com/koggdal/ocanvas

oCanvas是一个JavaScript库，旨在简化HTML5 Canvas的开发。不用处理像素，而是处理对象。它非常简单明了。请看一下这些例子，看看它有多容易。

oCanvas通过在原生像素绘制方法和创建并添加到画布中的对象之间建立桥梁，使画布开发更容易理解和执行。现在可以非常容易地创建对象、更改这些对象的属性并向其添加事件，而一切都很正常，因为oCanvas可以为您处理背景内容。

在这里插入图片描述

jCanvas
官网： https://projects.calebevans.me/jcanvas/

Gitee： https://github.com/caleb531/jcanvas

＜canvas＞元素是HTML5之外的一个新元素。它允许您在一个名为画布的空白元素上绘制形状、路径、图像和其他图形。

创建画布

在画布上绘制之前，您需要创建一个。

<canvas width=“300”height=“150”>
当然，画布可以是您想要的任何宽度/高度。您可能还希望为画布提供一个ID（以供将来参考）。

附带说明一下，您无法通过CSS准确设置画布的宽度和高度；您只能通过canvas元素的width和height属性来执行此操作。

导入jCanvas

您还需要以某种方式将jCanvas添加到页面中（通常使用＜script＞元素即可）。

在这里插入图片描述

Two.js
官网： https://two.js.org/

Gitee： https://github.com/jonobr1/two.js

Two.js 是面向现代 Web 浏览器的一个二维绘图 API。Two.js 可以用于多个场合：SVG，Canvas 和 WebGL，旨在使平面形状和动画的创建更方便，更简洁。
在这里插入图片描述

Paper.js
官网： http://paperjs.org/

Gitee： http://github.com/paperjs/paper.js

Paper.js是一款开源的矢量图形脚本框架，基于 HTML5 Canvas 开发，提供清晰的场景图、DOM和大量强大的功能用来创建各种向量图和贝塞尔曲线。
在这里插入图片描述

EaselJS
官网： https://createjs.com/easeljs

Gitee： https://github.com/createjs

EaselJS 是一个封装了 HTML5 画布(Canvas) 元素的 JavaScript 库。

在这里插入图片描述

Pixi.js
官网： https://pixijs.com/

Gitee： https://github.com/pixijs/pixijs

Pixi.js 是一个 2D webGL 渲染器，提供无缝 Canvas 回退，支持主流浏览器，包括桌面和移动。

在这里插入图片描述

知否知否M
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
开源项目-tfriedel6-canvas.zip
10-08
开源项目-tfriedel6-canvas.zip,A Go port of the HTML/JS canvas based on OpenGL that I have been working on. Thought others might find it useful. Feedback welcome!
CanvasEditor:使用HTML5 Canvas的具有IDE功能的简单文本编辑器
05-18
画布编辑器 使用HTML5 Canvas的具有IDE功能的简单文本编辑器 愿景和下一步 这只是一个概念证明，表明HTMl canvas可以用于带有闪烁光标和内容辅助（intelliSense）窗口等的简单文本编辑器。下一步是将这些功能迁移到一个类中，允许多行，并使contentAssist窗口与最后输入的单词对齐。
canvas-editor 电子病例编辑器插件
m0_61195004的博客
01-30 582
4.注意：安装包只提供核心代码，菜单栏和目录需要自己去做。3. this.options 的配置项（
吐血推荐一大波让你直呼哇塞的Canvas库
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
12-11 5405
点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群Canvas技术的诞生可谓是让绘图技术如虎添翼，本文将推荐一系列Canvas图形绘制、流程图、组织图、甘特图、全景图...
适用于前端开发的canvas绘图库
xsw_1999的博客
08-19 298
montage.js是基于canvas开发的绘图库，前端开发者可以使用此库快速完成分享图片生成、标注等功能开发。此库内置了 绘制/缩放/拖拽/连线 方法，只需要开启相应配置即可使用如果需要看完整的配置项说明，请到代码仓库中查看。
探索Flowty Realtime LCM Canvas：一款实时协作画布工具
最新发布
gitblog_00061的博客
04-25 314
探索Flowty Realtime LCM Canvas：一款实时协作画布工具 项目地址:https://gitcode.com/flowtyone/flowty-realtime-lcm-canvas Flowty Realtime LCM Canvas 是一个开源项目，旨在为用户提供一个实时、协同创作的画布环境。这款工具利用先进的Web技术，实现了在浏览器中进行图表设计、流程图绘制等多种任务，...
纯jquery+css绘画地图线路图插件Subway Map
09-04
纯jquery+css绘画地图线路图插件Subway Map，可用于线路图，电路图，html5开发环境下
【前端】Canvas 库推荐
我是Superman丶的博客
05-28 1460
【前端】Canvas 库推荐LeaferJS绚丽多彩的 HTML5 Canvas 2D 图形渲染引擎可结合 AI 绘图、生成界面。
Canvas 粒子运动特效插件库
你是人间四月天
09-12 692
详情
canvas动画
weixin_41897680的博客
07-08 835
方法 save():保存当前的绘图状态。 restore():恢复之前保存的绘图状态。 translate():平移 静态 平移 示例：绘制小伞 绘制伞顶 function drawTop(cx) { cx.fillStyle = 'blue' //填充样式 cx.beginPath() cx.arc(100, 100, 30, 0, Math.PI, true) cx.fill() } 绘制伞柄 //绘制伞柄 function drawBottom(cx) { cx.strokeSt
vue中的canvas插件
忧郁的蛋的专栏
08-21 1065
vue-fabricjs 提供了一种简化的方式来在 Vue.js 组件中使用 Fabric.js 的功能，包括创建和编辑图形、添加事件处理和动画等。vue中canvas插件有vue-konva、vue-fabricjs、vue-canvas-effect、vue-chartjs和vue-threejs等。详细介绍：1、vue-konva是一个用于在Vue.js中使用Konva.js的插件，Konva.js是一个功能强大的HTML5 2D 渲染引擎，可以用于创建交互式的Canvas应用程序等等。
Canvas-开源
05-29
Canvas 是一个开放式声音控制消息序列器，旨在与 OSC 服务器（如 Pure Data 或 Supercollider）一起使用。
WebCanvas-开源
05-15
WebCanvas是一个易于使用的Web内容系统，专注于模块化而不牺牲网站设计的灵活性。 WebCanvas网站可以看起来像，但是您希望它们看起来仍然保持强大的内容管理的所有优势
Geo Canvas-开源
04-27
Geocanvas项目旨在提供一组非常简单的API，以帮助开发人员在GTK / Gnome环境中创建地理参考的画布应用程序。
Rhino Canvas-开源
04-26
用于Rhino的Whatwg画布实现
HTML5 Canvas-开源
04-23
GWTCanvas小部件的扩展，允许利用HTML 5 canvas元素的所有功能，例如绘制文本和阴影。 取决于浏览器对canvas元素的支持。 请参阅项目主页链接以获取用法详细信息。
Textout Canvas-开源
05-13
用于创建具有简单功能JavaScript字体文件的工具，用于在画布标签上写字符串
CanvasChart-开源
05-29
用于创建 HTML Canvas 图表的 Javascript 库
vn-canvas-开源
04-27
用于HTML5画布的Javascript Visual Novel Engine最新版本为v.0.8.0（WebGL）先前版本为v.0.7.0（标准HTML5）。 另请参见在线版本，网址为http://vncanvas-on-nodejs.glitch.me/
写一个canvas的项目
06-07
好的，我可以给你一个简单的canvas项目示例，这个项目可以实现一个简单的画板功能。你可以根据这个示例进行修改和扩展。 HTML代码： ``` <!DOCTYPE html> <html> <head> <title>Canvas画板</title> <style type="text/css"> canvas { border: 1px solid #000000; } </style> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script type="text/javascript" src="paint.js"></script> </body> </html> ``` JS代码（paint.js）： ``` var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var isMouseDown = false; var lastX, lastY; canvas.addEventListener("mousedown", function(event) { isMouseDown = true; lastX = event.clientX - canvas.offsetLeft; lastY = event.clientY - canvas.offsetTop; }); canvas.addEventListener("mousemove", function(event) { if (isMouseDown) { var currentX = event.clientX - canvas.offsetLeft; var currentY = event.clientY - canvas.offsetTop; context.beginPath(); context.moveTo(lastX, lastY); context.lineTo(currentX, currentY); context.stroke(); lastX = currentX; lastY = currentY; } }); canvas.addEventListener("mouseup", function(event) { isMouseDown = false; }); ``` 这个项目实现了通过鼠标在画布上拖动实现画线的功能。当鼠标按下时，设置`isMouseDown`为真，并记录下当前的鼠标位置；当鼠标移动时，如果`isMouseDown`为真，则画出一条从上一个鼠标位置到当前位置的线段，并更新上一个鼠标位置；当鼠标松开时，设置`isMouseDown`为假。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

知否知否M

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值