Sora Watermark Remover - Allows you to remove the watermark from Sora videos.Try Now

CurateClick

idraw.js.org favicon

iDraw.js

iDraw.js是一个基于纯Canvas的JavaScript绘图库,支持绘制文字、矩形、圆形、图片、HTML片段和SVG文件,并提供可视化操控能力。它采用数据驱动方式实现Canvas绘图,适合开发各种可视化应用。

Check out iDraw.js on CurateClick

• Copy the embed code to showcase this product on your website

• Share on X to spread the word about this amazing tool

iDraw.js简介- 网站: https://idraw.js.org/- 一个基于纯Canvas来实现绘图和操控素材能力的JavaScript库。- 可以基于 iDraw.js 进行扩展自定义开发各种可视化操控应用,这里可以参考 idraw.js.org/studio/案例- 可以绘制文字、矩形、圆形、图片、HTML片段和SVG文件,并且都可以作为绘图元素生成指定格式的数据。## iDraw.js资料- GitHub地址: https://github.com/idrawjs/- 官方网站: https://idraw.js.org/- Playground API示例: https://idraw.js.org/playground/- 基于iDraw.js的Studio实际案例: https://idraw.js.org/studio/## 为啥要开发这个东西- 为了实现用纯Canvas能力结合图片、HTML和SVG作为素材 来做绘图工作。- 为了试试看单独用 Canvas的2D(二维)API 能作出怎样的多种素材绘图工作。- 最后是为了试试看尽量用 Canvas做素材的操控操作。## iDraw.js有哪些功能- 支持绘制文字、矩形、圆形、图片、HTML片段和SVG片段 绘图元素- 绘制文字element-text- 绘制矩形element-rect- 绘制圆形element-circle- 绘制图片element-image- 绘制HTML片段element-html- 绘制SVG片段element-svg支持基于Canvas的可视化操作## iDraw.js有哪些特点- 可以绘制文字、矩形、圆形、图片、HTML片段和SVG文件,并且作为绘图元素。- 可以直接在Canvas操控以上绘图元素,不用担心CSS和DOM变化的污染问题。- Canvas操控绘制,并且是所见即所得可以直接导出绘制的图片结果。- 由于可视化操控和图片生成都是基于Canvas,可以尽量减少绘图的浏览器兼容问题。## 原理介绍- 基于数据驱动来绘制Canvas的图画- 基于 requestAnimationFrame 来控制数据变化时候,Canvas的重绘处理- 内置一个前端并发队列来处理 图片、HTML和SVG的图片化转换渲染## 实际使用案例- 一个基于 iDraw.js 实现的UI可视化绘图- @idraw/studio 的实现<img width="1414" alt="snapshot-001" src="https://user-images.githubusercontent.com/8216630/132613269-7e5f60e2-a27f-4f72-a836-d44d55f67c49.png"><img width="1414" alt="snapshot-002" src="https://user-images.githubusercontent.com/8216630/132613273-08fe11a0-1a43-461e-a5fe-2b7844a2a8e3.png"><img width="1414" alt="snapshot-003" src="https://user-images.githubusercontent.com/8216630/132613276-742cded5-2122-400e-a689-74bda095eefa.png"><img width="1414" alt="snapshot-004" src="https://user-images.githubusercontent.com/8216630/132613281-8beec74b-124e-4c05-916d-bedd6b37cca9.png"><img width="1238" alt="snapshot-005" src="https://user-images.githubusercontent.com/8216630/132613282-f35fdb8c-76af-4aa5-974f-681d24874dba.png">## 其他- GitHub地址: https://github.com/idrawjs/- 官方网站: https://idraw.js.org/- Playground API示例: https://idraw.js.org/playground/- 基于iDraw.js的Studio实际案例: https://idraw.js.org/studio/

Latest Weekly Picks

nanobananaimg.com favicon
Weekly Pick

Nano Banana AI Image Generator for Professional Image Creation with Nano Banana Pro Models

Nano Banana
pslscale.com favicon
Weekly Pick

使用 Gemini 3 Pro 分析八字命理

人生 K 线
seedance15.ai favicon
Weekly Pick

Create Cinematic AI Videos from Text or Images with Seedance 1.5

Seedance 1.5 AI
tatted.ai favicon
Weekly Pick

The Tatted AI Tattoo Generator is a tool that allows you to create beautiful custom tattoos within seconds.

Tatted
pslscale.com favicon
Weekly Pick

Discover your PSL (Perceived Sexual Market Value) score with our AI-powered facial analysis

PSL Scale

IPYNB to PDF Converter – Free & Secure

www.reverie.im favicon
Weekly Pick

Dream It, Chat It, Create It

Reverie
make.ink favicon
Weekly Pick

Your AI tattoo generator for pro-grade concepts

make ink