代码拉取完成,页面将自动刷新
同步操作将从 奇虎360/spriteJS 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
SpriteJS 是跨平台的高性能图形系统,它能够支持web、node、桌面应用和小程序的图形绘制和实现各种动画效果。
SpriteJS Next 是SpriteJS的新版本,在浏览器端支持 webgl2 渲染,并可向后兼容降级为 webgl 和 canvas2d。
更多特性,访问 spritejs.com
如果你使用NPM进行包管理,可以直接使用npm命令安装
npm install spritejs
安装完之后可以使用ESModule加载:
import * as spritejs from 'spritejs';
由于spritejs是跨平台的,如果在node环境中跑,需要自行安装依赖库node-canvas
npm install canvas@next
如果你在浏览器中直接使用,可以使用CDN版本
<script src="https://unpkg.com/spritejs@3/dist/spritejs.js"></script>
如果你要在node服务端使用spritejs渲染,你需要安装node-canvas
可能需要先安装一下依赖:
sudo apt-get install libcairo2-dev libjpeg-dev libpango1.0-dev libgif-dev build-essential g++
然后安装node-canvas 2.x:
npm install canvas@next
SpriteJSNext 通过3D扩展库加载并渲染3D模型。
可以通过CDN加载扩展库:
<script src="https://unpkg.com/spritejs@3/dist/spritejs.es.min.js"></script>
<script src="https://unpkg.com/sprite-extend-3d/dist/sprite-extend-3d.js"></script>
或通过NPM加载:
import {Scene} from 'spritejs';
import {Cube, shaders} from 'sprite-extend-3d';
SpriteJS Next 提供若干类基础精灵元素,可以像操作DOM元素一样在图层上操作它们。
丰富了精灵类型
支持WebGL渲染
支持多线程
static, scale, stickyWidth, stickyHeight, stickyTop, stickyBottom, stickyLeft, stickyRight
八种。弱化了Label类
暂时不支持布局
不支持CSS
const {Scene, Sprite} = spritejs;
const container = document.querySelector('#stage');
const scene = new Scene({container, width: 3080, height: 800, mode: 'stickyTop'});
const layer = scene.layer();
const robot = new Sprite('https://p5.ssl.qhimg.com/t01c33383c0e168c3c4.png');
robot.attr({
anchor: [0, 0.5],
pos: [0, 0],
});
robot.animate([
{pos: [0, 0]},
{pos: [0, 300]},
{pos: [2700, 300]},
{pos: [2700, 0]},
], {
duration: 5000,
iterations: Infinity,
direction: 'alternate',
});
layer.append(robot);
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。