Spritejs简介
SpriteJS 是一款由 360 奇舞团开源的跨终端 canvas 绘图库,可以基于 canvas 快速绘制结构化 UI 、动画和交互效果,并发布到任何拥有 canvas 环境的平台上(比如浏览器、小程序和 node )。
使用
- 安装
npm install spritejs
- 引入
import * as spritejs from 'spritejs';
const { Scene, Sprite } = spritejs;
- 使用
<div id="adaptive"></div>
#adaptive {
width: 600px;
height: 600px;
position: relative;
}
const container = document.getElementById("adaptive");
const scene = new Scene({
container,
width: 600,
height: 360,
});
const layer = scene.layer();
const box = new Sprite({
anchor: [0.5, 0.5],
size: [150, 150],
pos: [300, 180],
bgcolor: "white",
borderWidth: 1,
borderRadius: 20,
});
layer.append(box);
- 完整代码
<template>
<div id="app">
<div>spriteJs-demo</div>
<div id="adaptive"></div>
</div>
</template>
<script>
import * as spritejs from 'spritejs';
const { Scene, Sprite } = spritejs;
export default {
data() {
return {
viewport: [600, 600],
};
},
mounted() {
const container = document.getElementById("adaptive");
const scene = new Scene({
container,
width: 600,
height: 360,
});
const layer = scene.layer();
const box = new Sprite({
anchor: [0.5, 0.5],
size: [150, 150],
pos: [300, 180],
bgcolor: "white",
borderWidth: 1,
borderRadius: 20,
});
layer.append(box);
},
};
</script>
<style lang="less">
#adaptive {
width: 600px;
height: 600px;
position: relative;
}
</style>