什么是 hcs
hcs 是一个基于 Canvas 的高清屏幕渲染工具，可以很方便地在高清屏幕上绘制图形，并支持高清屏幕的自适应。
安装 hcs
可以通过 npm 进行安装：
npm install hcs --save
使用 hcs
初始化 hcs
在需要使用 hcs 的页面中引入 hcs 并进行初始化，可以在任何一个元素上进行初始化，将会在该元素上进行绘制。
import hcs from 'hcs';
const canvas = document.getElementById('canvas');
const app = new hcs.App(canvas);绘制一个简单的图形
在 hcs 中，每个可绘制的对象都是一个 hcs 内部封装的对象，可以通过创建一个具体类型的对象来进行绘制。
const rect = new hcs.Rect({
x: 10,
y: 10,
width: 100,
height: 100,
fillStyle: '#f00'
});
app.add(rect);支持高清屏幕
使用 hcs 可以非常方便地支持高清屏幕的自适应，所有的坐标和尺寸都可以使用像素值，hcs 会自动将其转化为实际的物理像素。
const rect = new hcs.Rect({
x: 10,
y: 10,
width: 50, // 实际大小为 100px
height: 50, // 实际大小为 100px
fillStyle: '#f00'
});
app.add(rect);更多的图形类型
hcs 支持众多的图形类型，包括矩形、圆形、直线、曲线等，可以使用这些图形类型来绘制更加复杂的图形。
-- -------------------- ---- ------- ----- ------ - --- ------------ -- ---- -- ---- ------- --- ---------- -------- ---- ---- ----- --- ---------------- ----- ---- - --- ---------- ------- --- ------- --- ----- --- ----- --- ---------- -- ------------ ------ --- --------------
动画
hcs 还支持简单的动画，可以使用 requestAnimationFrame 实现：
function animate() {
app.clear();
rect.x++;
app.add(rect);
requestAnimationFrame(animate);
}
animate();总结
hcs 是一个非常方便、易用的高清屏幕渲染工具，可以用来快速绘制高品质的图形，对于需要在高清屏幕上实现的项目非常有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600553ab81e8991b448d0e79