{"id":13402328,"url":"https://github.com/spritejs/spritejs","last_synced_at":"2025-05-13T20:22:33.304Z","repository":{"id":39964469,"uuid":"96287699","full_name":"spritejs/spritejs","owner":"spritejs","description":"A cross platform high-performance graphics system.","archived":false,"fork":false,"pushed_at":"2024-06-09T14:25:58.000Z","size":42776,"stargazers_count":5361,"open_issues_count":75,"forks_count":324,"subscribers_count":108,"default_branch":"master","last_synced_at":"2025-04-09T01:19:52.640Z","etag":null,"topics":["2d","3d","canvas","rendering","webgl","webgl2"],"latest_commit_sha":null,"homepage":"http://spritejs.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/spritejs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-05T07:04:45.000Z","updated_at":"2025-04-07T06:53:26.000Z","dependencies_parsed_at":"2023-10-11T12:48:38.511Z","dependency_job_id":"42320cca-f4f4-48d5-8625-4adf7ac97258","html_url":"https://github.com/spritejs/spritejs","commit_stats":{"total_commits":1595,"total_committers":24,"mean_commits":66.45833333333333,"dds":0.08965517241379306,"last_synced_commit":"b93c94833eee582738a6442c21af117ecea637bd"},"previous_names":[],"tags_count":78,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fspritejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fspritejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fspritejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/spritejs%2Fspritejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/spritejs","download_url":"https://codeload.github.com/spritejs/spritejs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251311332,"owners_count":21569008,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["2d","3d","canvas","rendering","webgl","webgl2"],"created_at":"2024-07-30T19:01:14.598Z","updated_at":"2025-04-28T12:02:25.620Z","avatar_url":"https://github.com/spritejs.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"http://spritejs.com\"\u003e\u003cimg src=\"https://p2.ssl.qhimg.com/t01e6920579715cc92b.jpg\" alt=\"spritejs logo\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003ca href=\"http://spritejs.com\"\u003e\u003ch1 align=\"center\"\u003espritejs.com\u003c/h1\u003e\u003c/a\u003e\n\n[![npm status](https://img.shields.io/npm/v/spritejs.svg)](https://www.npmjs.org/package/spritejs)\n[![build status](https://api.travis-ci.org/spritejs/spritejs.svg?branch=master)](https://travis-ci.org/spritejs/spritejs)\n[![Package Quality](http://npm.packagequality.com/shield/spritejs.svg?v=3)](http://packagequality.com/#?package=spritejs)\n[![Maintainability](https://api.codeclimate.com/v1/badges/8327f502ee8ba003c6b8/maintainability)](https://codeclimate.com/github/spritejs/spritejs/maintainability)\n[![License](https://img.shields.io/npm/l/spritejs.svg)](LICENSE)\n\nSpritejs is a cross platform high-performance graphics system, which can render graphics on web, node, desktop applications and mini-programs.\n\nSpritejs\u003csup\u003eNext\u003c/sup\u003e is the new version of spritejs. It is renderer agnostic enabling the same api to render in multiple contexts: webgl2, webgl, and canvas2d.\n\nManipulate the **sprites** in canvas as you do with the DOM elements.\n\n## Features\n\n- Manipulate the sprites element as you do with the DOM elements.\n- Rendering by **WebGL2** context.\n- Multiple layers.\n- DOM Events.\n- Object Oriented Programmed Development with ES6+.\n- OffscreenCanvas and [Web Worker](https://spritejs.com/#/en/guide/worker).\n- Work with [d3](https://github.com/d3/d3).\n- [Server-side rendering](https://spritejs.com/#/en/guide/platforms).\n- [Vue](http://vue.spritejs.com).\n\n## Quick Start\n\n**SpriteJS** - spritejs.com\n\n```html\n\u003cscript src=\"https://unpkg.com/spritejs@3/dist/spritejs.min.js\"\u003e\u003c/script\u003e\n\u003cdiv id=\"container\" style=\"width:400px;height:400px\"\u003e\u003c/div\u003e\n\u003cscript\u003e\n    const imgUrl = 'https://s5.ssl.qhres2.com/static/ec9f373a383d7664.svg'\n    const {Scene, Sprite} = spritejs;\n    const container = document.getElementById('container');\n    const paper = new Scene({\n      container,\n      width: 400,\n      height: 400,\n    })\n\n    const sprite = new Sprite(imgUrl)\n    sprite.attr({\n      bgcolor: '#fff',\n      pos: [0, 0],\n      size: [400, 400],\n      borderRadius: '200'\n    })\n\n    paper.layer().appendChild(sprite)\n\u003c/script\u003e\n```\n\n\u003cdiv style=\"font-size: 1.5rem\"\u003eLearn more at \u003cstrong style=\"font-size: 2.5rem\"\u003e\u003ca href=\"http://spritejs.com/\"\u003e\u003cfont size=\"36\"\u003espritejs.com\u003c/font\u003e\u003c/a\u003e\u003c/strong\u003e \u003c/div\u003e\n\n## Usage\n\nIn browser:\n\n```html\n\u003cscript src=\"https://unpkg.com/spritejs@3/dist/spritejs.min.js\"\u003e\u003c/script\u003e\n```\n\nWith Node.js:\n\n```bash\nnpm install spritejs --save\n```\n\n```js\nimport * as spritejs from 'spritejs';\n```\n\n## 3D\n\nSpriteJS\u003csup\u003eNext\u003c/sup\u003e can render 3D elements through [3D extension library](https://github.com/spritejs/sprite-extend-3d).\n\n```html\n\u003cscript src=\"https://unpkg.com/spritejs@3/dist/spritejs.es.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/sprite-extend-3d/dist/sprite-extend-3d.js\"\u003e\u003c/script\u003e\n```\n\nOr from NPM\n\n\n```js\nimport {Scene} from 'spritejs';\nimport {Cube, shaders} from 'sprite-extend-3d';\n```\n\n## Examples\n\n### Basic\n\n- [Overview](http://spritejs.com/demo/)\n- [Sprites](http://spritejs.com/demo/#basic_sprites)\n- [Path \u0026 Group](http://spritejs.com/demo/#path_groups)\n- [Labels](http://spritejs.com/demo/#labels)\n- [Button](http://spritejs.com/demo/#button)\n- [Transforms](http://spritejs.com/demo/#transforms)\n- [Events](http://spritejs.com/demo/#events)\n- [Filters](http://spritejs.com/demo/#filters)\n- [Animations](http://spritejs.com/demo/#animations)\n- [SVG Paths](http://spritejs.com/demo/#svg_path)\n- [Offset API](http://spritejs.com/demo/#offset_api)\n\n### With D3\n\nCompatible with [d3.js](https://github.com/d3/d3).\n\n- [Bar Graph](http://spritejs.com/demo/#/d3/bar)\n- [Hierarchy](http://spritejs.com/demo/#/d3/hierarchy)\n- [Map](http://spritejs.com/demo/#/d3/map)\n- [Force Links](http://spritejs.com/demo/#/d3/links)\n\n### 3D Extension\n\n- [3D Cube](http://spritejs.com/demo/#/3d/basic)\n- [Camera](http://spritejs.com/demo/#/3d/camera2)\n- [Cube Map](http://spritejs.com/demo/#/3d/cubemap)\n- [Physically Based Rendering](http://spritejs.com/demo/#/3d/pbr)\n- [Geometry](http://spritejs.com/demo/#/3d/geometry)\n- [Geometry Model](http://spritejs.com/demo/#/3d/geometry3)\n- [Model \u0026 Texture](http://spritejs.com/demo/#/3d/model_texture)\n- [Groups](http://spritejs.com/demo/#/3d/group3)\n- [Skydom](http://spritejs.com/demo/#/3d/skydom)\n- [Video](http://spritejs.com/demo/#/3d/video)\n- [Shadow](http://spritejs.com/demo/#/3d/shadow)\n- [Post channel](http://spritejs.com/demo/#/3d/post)\n- [GPGPU](http://spritejs.com/demo/#/3d/gpgpu)\n\n### [Q-Charts](https://github.com/spritejs/q-charts)\n\nA visulization library based on spritejs.\n\n- [QCharts basic](https://www.qcharts.cn/#/demo/line/default)\n- [Lines](https://www.qcharts.cn/#/demo/line/multi)\n- [Smooth Lines](https://www.qcharts.cn/#/demo/line/smooth)\n- [Lines \u0026 Bars](https://www.qcharts.cn/#/more/line-mixLineAndBar)\n- [Area Chart](https://www.qcharts.cn/#/demo/area/stack)\n- [Pie Chart](https://www.qcharts.cn/#/demo/pie/default)\n- [Rose Chart](https://www.qcharts.cn/#/demo/polarBar/group)\n- [Radar Chart](https://www.qcharts.cn/#/demo/radar/default)\n- [Bubble Chart](https://www.qcharts.cn/#/demo/scatter/bubble)\n\n\u003c!-- ### With Proton\n\n[Proton](https://github.com/a-jie/Proton) is a lightweight and powerful javascript particle engine. \n\n- [Big Fire](http://spritejs.com/demo/#/proton/fire)\n- [Background Particles](http://spritejs.com/demo/#/proton/position)\n- [Custom Behavior](http://spritejs.com/demo/#/proton/behavior)\n\n### With Matter-js\n\n[Matter.js]((https://github.com/liabru/matter-js)) is a JavaScript 2D rigid body physics engine.\n\n- [Mixed shapes](http://spritejs.com/demo/#/matterjs/mixed_shapes)\n\n--\u003e\n\n### Ecosystem \u0026 Extensions\n\n| **Project**                         | **Description**                           |\n| ------------------------------- | ----------------------------------- |\n| [sprite-vue](https://github.com/spritejs/sprite-vue)| SpriteJS for Vue.js. |\n| [sprite-react](https://github.com/spritejs/sprite-react)| Rendering spritejs elements with React. |\n| [q-charts](https://github.com/spritejs/q-charts) | A visulization library based on spritejs |\n| [cat-charts-vue](https://github.com/spritejs/cat-charts-vue)| A visulization library based on spritejs , qcharts and Vue. |\n\n## Architecture\n\nSpritejs\u003csup\u003eNext\u003c/sup\u003e provides several kinds of basic sprite elements, which can be operated on the layer like DOM elements.\n\n![架构图](https://s0.ssl.qhres2.com/static/fe2ee3b6fd1aa59f.svg)\n\n### Build\n\nBuild with NPM\n\n```bash\nnpm run build\n```\n\nBuild Doc\n\n```bash\nnpm run build-doc\n```\n\n### Tests\n\n```bash\nnpm test\n```\n\n# V2\n\n[SpriteJS v2.0](https://github.com/spritejs/spritejs/tree/v2)\n\n# Compatibility\n\nCompatible for most modern browsers.\n\nYou should import [babel-polyfill](https://cdn.baomitu.com/babel-polyfill) for early browers(i.e. iOS 8).\n\n## Contributors\n\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore --\u003e\n\n| | | | | | | |\n| :---: | :---: | :---: | :---: | :---: | :---: | :---: |\n| [\u003cimg src=\"https://avatars2.githubusercontent.com/u/12529206?s=460\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ebetseyliu\u003c/b\u003e\u003c/sub\u003e](https://github.com/betseyliu)\u003cbr /\u003e[💻](https://github.com/spritejs/spritejs/commits?author=betseyliu \"Code\") [📖](https://github.com/spritejs/spritejs/commits?author=betseyliu \"Documentation\") | [\u003cimg src=\"https://avatars0.githubusercontent.com/u/11631503?s=460\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eShero0311\u003c/b\u003e\u003c/sub\u003e](https://github.com/Shero0311)\u003cbr /\u003e[📖](https://github.com/spritejs/spritejs/commits?author=Shero0311 \"Documentation\") | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/16967069?s=460\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003e有马\u003c/b\u003e\u003c/sub\u003e](https://github.com/makeco)\u003cbr /\u003e[📖](https://github.com/spritejs/spritejs/commits?author=makeco \"Documentation\") [💻](https://github.com/spritejs/spritejs/commit/e2ef39bafd81ee09494f5ebbaf0f8319dbd85122 \"Code\")| [\u003cimg src=\"https://avatars1.githubusercontent.com/u/8180186?s=400\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003e文蔺\u003c/b\u003e\u003c/sub\u003e](https://github.com/AngusFu)\u003cbr /\u003e[💻](https://github.com/spritejs/spritejs/commits?author=AngusFu \"Code\") [🐛](https://github.com/spritejs/spritejs/issues/30 \"Bug reports\") | [\u003cimg src=\"https://avatars3.githubusercontent.com/u/5996758?s=400\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003e蔡斯杰\u003c/b\u003e\u003c/sub\u003e](https://github.com/SijieCai)\u003cbr /\u003e[💻](https://github.com/spritejs/sprite-core/commits?author=SijieCai \"Code\") [📖](https://github.com/spritejs/spritejs/commits?author=SijieCai \"Documentation\") | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/726566?s=400\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eShaofei Cheng\u003c/b\u003e\u003c/sub\u003e](https://github.com/wintercn)\u003cbr /\u003e[💻](https://github.com/spritejs/sprite-core/commits?author=wintercn \"Code\") [📖](https://github.com/spritejs/spritejs/commits?author=wintercn \"Documentation\") | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/2947893?s=400\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003e摇太阳\u003c/b\u003e\u003c/sub\u003e](https://github.com/yaotaiyang)\u003cbr /\u003e[📖](https://github.com/spritejs/spritejs/commits?author=yaotaiyang \"Documentation\")  \n| [\u003cimg src=\"https://avatars2.githubusercontent.com/u/424491?s=400\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003e公子\u003c/b\u003e\u003c/sub\u003e](https://github.com/lizheming)\u003cbr /\u003e[💻](https://github.com/spritejs/sprite-core/commits?author=lizheming \"Code\") |  [\u003cimg src=\"https://avatars1.githubusercontent.com/u/26452939?s=400\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ejustemit\u003c/b\u003e\u003c/sub\u003e](https://github.com/justemit)\u003cbr /\u003e[💻](https://github.com/spritejs/sprite-extend-shapes/commits?author=justemit \"Code\")  [📖](https://github.com/spritejs/sprite-extend-shapes/commits?author=justemit \"Documentation\") [🐛](https://github.com/spritejs/sprite-core/issues/34 \"Bug reports\") | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/40935?s=400\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eWelefen Lee\u003c/b\u003e\u003c/sub\u003e](https://github.com/welefen)\u003cbr /\u003e[💻](https://github.com/spritejs/sprite-flex-layout \"Code\")   | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/30425185?s=400\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eYUPENG12138\u003c/b\u003e\u003c/sub\u003e](https://github.com/YUPENG12138)\u003cbr /\u003e[📖](https://github.com/spritejs/spritejs/issues/52 \"Documentation\")| [\u003cimg src=\"https://avatars1.githubusercontent.com/u/1617414?s=400\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003exinde\u003c/b\u003e\u003c/sub\u003e](https://github.com/xinde)\u003cbr /\u003e[🐛](https://github.com/spritejs/spritejs/issues/59 \"Bug reports\")| [\u003cimg src=\"https://avatars2.githubusercontent.com/u/13284749?s=400\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eggvswild\u003c/b\u003e\u003c/sub\u003e](https://github.com/ggvswild)\u003cbr /\u003e[🐛](https://github.com/spritejs/spritejs/issues/70 \"Bug reports\")| [\u003cimg src=\"https://avatars2.githubusercontent.com/u/41336612?s=400\u0026u=aef0eee102ca66f28c7cbd8769fa21be9dfe3697\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eliulinboyi\u003c/b\u003e\u003c/sub\u003e](https://github.com/liulinboyi)\u003cbr /\u003e[💻](https://github.com/spritejs/spritejs/commits?author=liulinboyi \"Code\")|\n| [\u003cimg src=\"https://avatars3.githubusercontent.com/u/22330483?s=400\u0026u=93fe7b2234377c1f55feb81811354ed5af80e0c5\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eLulzx\u003c/b\u003e\u003c/sub\u003e](https://github.com/Lulzx)\u003cbr /\u003e[💻](https://github.com/spritejs/sprite-core/commits?author=Lulzx \"Code\") |  [\u003cimg src=\"https://avatars3.githubusercontent.com/u/63718466?s=400\u0026u=4836efce7fc68af52a4449e95e920da9ad1df34f\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003easidar\u003c/b\u003e\u003c/sub\u003e](https://github.com/asidar)\u003cbr /\u003e[💻](https://github.com/spritejs/sprite-extend-shapes/commits?author=asidar \"Code\")  | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/1798972?s=400\u0026u=36d324fd75d4f4fb14992dff084e4c013c8dc214\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003ealphatr\u003c/b\u003e\u003c/sub\u003e](https://github.com/alphatr)\u003cbr /\u003e[💻](https://github.com/spritejs/sprite-extend-shapes/commits?author=alphatr \"Code\")   | [\u003cimg src=\"https://avatars2.githubusercontent.com/u/30466018?s=400\u0026u=e35b17b9772b1ed63f3b0c5897f3076e94a426ed\u0026v=4\" width=\"60px;\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eW-Qing\u003c/b\u003e\u003c/sub\u003e](https://github.com/W-Qing)\u003cbr /\u003e[📖](https://github.com/spritejs/spritejs/commits?author=W-Qing \"Documentation\") |\n\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\n## Credits and Acknowledgements\n\n- [svg-path-contours](https://github.com/mattdesl/svg-path-contours) Approximates an SVG path into a discrete list of 2D contours (polylines). \n\n- [extrude-polyline](https://github.com/mattdesl/extrude-polyline) Extrudes a 2D polyline with a given line thickness and the desired join/cap types. \n\n- [triangulate-contours](https://github.com/mattdesl/triangulate-contours) Triangulates a series of contours using Tess2.js. \n\n- [OGL](https://github.com/oframe/ogl) OGL is a small, effective WebGL library aimed at developers who like minimal layers of abstraction, and are comfortable creating their own shaders.\n\n## License\n\n[MIT](LICENSE)\n","funding_links":[],"categories":["JavaScript","前端常用","Projects List"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspritejs%2Fspritejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fspritejs%2Fspritejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fspritejs%2Fspritejs/lists"}