在本文中,我們將看到如何使用 backgroundImage 屬性在 Fabric.js 中設置 Canvas 的背景圖像。 Fabric.js 中的 Canvas 用作 HTML 提供的本機畫布對象的包裝器。它提供對底層畫布的高級訪問,允許它擁有一個對象模型,允許解析 SVG 文件,並允許以直觀的方式與畫布進行交互。
方法:為了使其成為可能,我們將使用一個名為 Fabric.js 的 JavaScript 庫。導入庫後,我們將在 body 標簽中創建 canvas 塊。之後,我們將初始化 Fabric.js 提供的畫布對象的實例,並使用 backgroundImage 屬性更改畫布的背景圖像。
用法:
fabric.Canvas(canvasElement, { backgroundImage:String | Fabric.Image });
參數:該屬性接受上麵提到和下麵描述的單個參數。
- backgroundImage:它是一個包含圖像 URL 的字符串或一個 Fabric.Image 對象,用於指定 Canvas 的背景圖像。
以下示例說明了在 JavaScript 中使用 Fabric.js Canvas backgroundImage 屬性。
範例1:此示例使用字符串 URL 來更改 Canvas 的背景圖像。
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<div style="text-align:center;width:500px;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<b>
Fabric.js | Canvas backgroundImage Property
</b>
</div>
<canvas id="canvas" width="660" height="250"
style="border:1px solid #000000">
</canvas>
<script>
// Initiate a Canvas instance
let canvas = new fabric.Canvas("canvas", {
// Set the background image
// of the Canvas
backgroundImage:
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
});
</script>
</body>
</html>
輸出:
範例2:本示例使用 Fabric.Image 對象來更改 Canvas 的背景圖像。
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
</script>
</head>
<body>
<div style="text-align:center;
width:660px;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<b>
Fabric.js | Canvas backgroundImage Property
</b>
</div>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-logo.png"
id="my_img" style="display:none">
<canvas id="canvas" width="660" height="250"
style="border:1px solid #000000">
</canvas>
<script>
// Select the image from the document
let selectedImage =
document.querySelector("#my_img");
// Create a Fabric.Image object
let bg_img = new fabric.Image(selectedImage);
// Initiate a Canvas instance
let canvas = new fabric.Canvas("canvas", {
// Set the background image
// of the Canvas to the above
// Fabric.Image object
backgroundImage:bg_img
});
</script>
</body>
</html>
輸出:
相關用法
- HTML Style backgroundImage用法及代碼示例
- HTML canvas lineWidth用法及代碼示例
- HTML canvas textAlign用法及代碼示例
- HTML canvas font用法及代碼示例
- HTML canvas lineJoin用法及代碼示例
- HTML canvas shadowColor用法及代碼示例
- HTML canvas fillStyle用法及代碼示例
- HTML canvas strokeStyle用法及代碼示例
- HTML canvas shadowBlur用法及代碼示例
- HTML canvas shadowOffsetX用法及代碼示例
- HTML canvas shadowOffsetY用法及代碼示例
- HTML canvas lineCap用法及代碼示例
- HTML canvas textBaseline用法及代碼示例
- HTML canvas globalAlpha用法及代碼示例
- HTML canvas miterLimit用法及代碼示例
- Fabric.js Canvas backgroundColor屬性用法及代碼示例
- Fabric.js Canvas selection屬性用法及代碼示例
- Fabric.js Canvas defaultCursor屬性用法及代碼示例
- Fabric.js Canvas containerClass屬性用法及代碼示例
注:本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 Fabric.js Canvas backgroundImage Property。非經特殊聲明,原始代碼版權歸原作者所有,本譯文未經允許或授權,請勿轉載或複製。