Fabric.js组合图形

最新推荐文章于 2025-06-23 14:17:02 发布

wenhuixl

最新推荐文章于 2025-06-23 14:17:02 发布

阅读量3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Fabric.js学习文章标签： Fabric.js

本文链接：https://blog.youkuaiyun.com/qq_31519989/article/details/99564438

Fabric.js学习专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何使用Fabric.js库来组合不同的图形，形成复杂的视觉效果。通过实例展示了利用Fabric.js实现图形组合的过程，并提供了最终的展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Fabric.js组合图形

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Fabric.js组合图形</title>
</head>
<style>
    html, body {
        margin:0;
        padding:0;
    }
    .container {
        height:100%;
        width:100%;
        border: 1px solid green;
        position:fixed;
    }
</style>
<body>
<canvas class="container" id="canvas"></canvas>

<script src="lib/fabric.js"></script>
<script>
    var canvas = new fabric.Canvas('canvas');
    //绘制圆形
    var circle = new fabric.Circle({
        radius: 100,
        fill: '#eef',
        scaleY: 0.5,
        originX: 'center',//调整中心点的X轴坐标
        originY: 'center'//调整中心点的Y轴坐标
    });
    //绘制文本
    var text = new fabric.Text('Hello World', {
        fontSize: 30,
        originX: 'center',
        originY: 'center'
    })
    //进行组合
    var group = new fabric.Group([circle, text], {
        left: 150,
        top: 100,
        angle: 10
    })
    canvas.add(group);
</script>
</body>
</html>

效果图

在这里插入图片描述