https://benchmarks.slaylines.io/leafer.html
https://github.com/slaylines/canvas-engines-comparison
https://github.com/fabricjs/fabric.js?tab=readme-ov-file
updateBackgroundImage(presetSence?.backgroundImage || '', canvasContent!);
addSubjectToCanvas(allSubjectImage[imageKey]?.url, canvasContent!);
let canvas = canvasContent as fabric.Canvas;
canvas = new fabric.Canvas('canvas');
// 设置背景图以及缩放比例
canvas?.setBackgroundImage(img, canvas.requestRenderAll.bind(canvas), {
top: 0,
left: 0,
scaleX: width / imgWidth,
scaleY: height / imgHeight,
});
Other Solutions其他解决方案
| Project项目 | Description描述 | Demo演示 |
|---|---|---|
| Three.js | 3D graphics3D图形 | |
| PixiJS | WebGL rendererWebGL渲染器 | |
| Konva | Similar features类似特征 | ❌ |
| html-to-imageHTML转图像 | HTML to image/canvasHTML转image/canvas |
- Canvas方式相信我们都不陌生，是Html5的一个新增的一个画布绘图的功能。
- Webgl其实是Opengl在网页浏览器中的应用，专门针对三维视图所出现最新Api。
在Pixijs中，无论是使用Canvas还是Webgl方式，所写的代码都是一样的，只是需要通过PIXI.Application中的forceCanvas来设置是否强制使用Canvas方式即可。