Fabric.js组合图形

Fabric.js组合图形


<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>

效果图

Fabric.js组合图形_第1张图片

你可能感兴趣的:(Fabric.js学习,Fabric.js)