canvas的超强辅助 -- fabric.js

地址

可以快捷的实现类似ps的功能 ,放大缩小变形,输入文本,绘制图形等等 – 暂时只做备忘后续再更新使用

直接引入js

	https://cdn.bootcdn.net/ajax/libs/fabric.js/0.9.35/all.min.js

用于绘制的canvas

	<canvas class="c" id="c"  style="width:200px;height:200px;border:1px solid red"></canvas>

创建fabric的实例,并向其中添加一个矩形

	var canvas = new fabric.Canvas('c');

    // create a rectangle object
    var rect = new fabric.Rect({
        left: 100,
        top: 100,
        fill: 'red',
        width: 60,
        height: 60,
        hasControls: true
    });

在这里插入图片描述
可以放大,旋转
在这里插入图片描述

完整代码

	<!DOCTYPE html>
	<html lang="en">
	<head>
	  <meta charset="UTF-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <title>Document</title>
	  <!-- canvas的扩展操作 -->
	  <script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/0.9.35/all.min.js"></script>
	</head>
	<body>
	  <canvas class="c" id="c"  style="width:200px;height:200px;border:1px solid red">
	
	  </canvas>
	
	</body>
	</html>
	<script>
	
	  window.onload = function () {
	    var canvas = new fabric.Canvas('c');
	
	    // create a rectangle object
	    var rect = new fabric.Rect({
	        left: 100,
	        top: 100,
	        fill: 'red',
	        width: 60,
	        height: 60,
	        hasControls: true
	    });
	    var rect1 = new fabric.Rect({
	        left: 100,
	        top: 100,
	        fill: 'red',
	        width: 60,
	        height: 60,
	        hasControls: true,
	        angle:30
	    });
	    var rect2 = new fabric.Rect({
	        left: 100,
	        top: 100,
	        fill: 'red',
	        width: 60,
	        height: 60,
	        hasControls: true,
	        angle:60
	    });
	    var rect3 = new fabric.Rect({
	        left: 100,
	        top: 100,
	        fill: 'red',
	        width: 60,
	        height: 60,
	        hasControls: true,
	        angle:90
	    });
	    var rect4 = new fabric.Rect({
	        left: 100,
	        top: 100,
	        fill: 'red',
	        width: 60,
	        height: 60,
	        hasControls: true,
	        angle:120
	    });
	    var rect5 = new fabric.Rect({
	        left: 100,
	        top: 100,
	        fill: 'red',
	        width: 60,
	        height: 60,
	        hasControls: true,
	        angle:150
	    });
	
	    // "add" rectangle onto canvas
	    canvas.add(rect);
	    // canvas.add(rect1);
	    // canvas.add(rect2);
	    // canvas.add(rect3);
	    // canvas.add(rect4);
	    // canvas.add(rect5);
	  }
	</script>
©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页