在本文中，我們將使用 FabricJS 創(chuàng)建帶有背景圖像的畫布。 FabricJS 中有兩種方法可以改變畫布的背景圖像。
第一種方法是使用 Canvas 類本身并傳遞 backgroundImage。
第二種方法是使用setBackgroundColor方法。讓我們通過一個示例來了解它們。
方法 1：使用 Canvas 類
在第一種方法中，我們將使用 Canvas類本身，方法是在類的第二個參數(shù)中傳遞backgroundImage。
語法
new fabric.Canvas(element: HTMLElement|String, {backgroundImage: fabric.Image}: Object)
登錄后復(fù)制
參數(shù)
元素 – 此參數(shù)是 元素本身，可以使用 document.getElementById() 或 元素本身的 id 派生。 FabricJS 畫布將在此元素上初始化。
選項（可選） – 此參數(shù)是一個對象，它提供對畫布進(jìn)行額外的自定義，backgroundImage 就是其中之一，它將幫助我們自定義背景圖像。 backgroundImage將fabric.Image作為指定畫布背景圖像的值。
示例1
檢查以下示例演示了如何使用 FabricJS 創(chuàng)建帶有背景圖像的 Canvas。由于 FabricJS 在 Canvas API 之上工作，我們將使用 標(biāo)簽創(chuàng)建一個 HTML 元素并給它一個 id。此外，我們將將該 id 傳遞給 FabricJS API，以便它可以在 標(biāo)記上初始化 FabricJS Canvas 實例，在第二個參數(shù)中，我們將傳遞一個帶有 key backgroundImage 的對象，其值作為圖像的 URL。
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2> Creating a Canvas with a Background Image in Fabric.js </h2>
<canvas id="canvas"> </canvas>
<script>
//Initiate a canvas instance
var canvas = new fabric.Canvas("canvas", {
backgroundImage: "https://www.tutorialspoint.com/tools/images/logo.png",
});
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
登錄后復(fù)制
方法 2：使用 setBackgroundImage 方法
我們還可以在創(chuàng)建畫布后使用 Canvas 類中提供的 setBackgroundImage 方法。讓我們仔細(xì)看看如何實現(xiàn)這一目標(biāo)。
語法
canvas.setBackgroundImage(image: fabric.Image | String, callback: function, options: Object)
登錄后復(fù)制
參數(shù)
image – 此參數(shù)接受fabric.Image或引用的字符串我們想要設(shè)置背景的圖像的 URL。
callback – 此參數(shù)采用回調(diào)函數(shù)當(dāng)圖像加載并設(shè)置為背景時調(diào)用。
選項（可選）： – 此參數(shù)是我們可以在其中指定背景圖像選項的對象。我們可以更改不透明度、放大或縮小圖像等。
示例 2
首先，我們將圖像 URL 分配給一個變量并將其用作第一個參數(shù)。在第二個參數(shù)中，我們將在設(shè)置背景圖像后使用 renderAll() 方法綁定畫布，如下面的代碼所示 –
<!DOCTYPE html>
<html>
<head>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
<h2> Creating a Canvas with a Background Image in Fabric.js </h2>
<p> Here we have used the setBackgroundImage method. </p>
<canvas id="canvas"> </canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
// Image URL
var imageURL = "https://www.tutorialspoint.com/tools/images/logo.png";
canvas.setBackgroundImage(imageURL, canvas.renderAll.bind(canvas), {
backgroundImageOpacity: 1,
originX: "left",
originY: "top",
top: 90,
left: 70,
scaleX: 1.1,
scaleY: 1.1,
});
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>
登錄后復(fù)制
以上就是如何使用 FabricJS 創(chuàng)建帶有背景圖像的畫布？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
