tool-box
/
fabric.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fabric</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/4.5.0/fabric.min.js"></script>
</head>
<body>
    <canvas id="c" width="800"  height="600"> </canvas>
    <script>
        // // 获取画布的引用
        // var canvasEl = document.getElementById('c');
        // // 获取2d context 对象 用来操作 (之前提到的bitmap)
        // var ctx = canvasEl.getContext('2d');
        // // 给当前上下文设置颜色
        // ctx.fillStyle = 'red';
        // // 在100, 100的位置创建一个20*20的矩形
        // ctx.translate(100, 100);
        // ctx.rotate(Math.PI / 180 * 45);
        // ctx.fillRect(-10, -10, 120, 120);

        // ctx.fillRect(100, 100, 50, 50);

        //


        // 包裹一下canvas (with id="c")
        var canvas = new fabric.Canvas('c');

        // 新建一个矩形对象
        var rect = new fabric.Rect({
            left: 100,
            top: 100,
            fill: 'red',
            width: 50,
            angle: 45,
            height: 50
        });
        // 将矩形添加到canvas里
        canvas.add(rect);


    </script>
</body>
</html>