Fabric 是canvas的封裝庫(Fabric.jsis a powerful and simpleJavascriptHTML5 canvas library)

1.官方地址:http://fabricjs.com/

2. cdn地址: <script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/4.2.0/fabric.js"></script>

3.相關的例子:

3.1在canvas中加入背景圖片,並設定圖片不可移動和拖拽

html中的設定:

  <img src="img/bg.png" id="lamp"  style
 
="display: none;" />
  <canvas id="canvas"  width="900px"  height="383px" ></canvas>

js 中的程式碼:

window.onload = function() { //這塊必須用window.onload  而不用 $(function(){}) 否則會造成圖片時有時無  因為涉及到圖片是否載入完畢
var canvas = new fabric.Canvas('canvas');
var imgElement = document.getElementById('lamp');
var
 
 imgInstance = new fabric.Image(imgElement, {
left: 0,
top: 0,
angle: 0,
width:100, // 寬高不設定 預設鋪滿canvas
height:100,
opacity: 1
});

// imgInstance .setWidth(350)   也可以這樣設定寬高
// imgInstance .setHeight(200)

//設定這個圖片不能動
imgInstance.hasControls = false;
imgInstance.lockMovementX = true;
imgInstance.lockMovementY = true;
imgInstance.lockRotation 
 
= true;
imgInstance.selectable = false;
canvas.add(imgInstance);
}