在本文中，我們將使用 FabricJS 建立具有給定背景顏色的畫布。 FabricJS API 提供的預設背景顏色是白色，可以使用第二個參數進行自訂。
new fabric.Canvas(element: HTMLElement|String, { backgroundColor: String }: Object)# - 此參數是
選項 - 此參數是一個對象，它提供了額外的可自訂性我們的畫布和backgroundColor 就是其中之一，它將幫助我們自訂背景顏色
讓我們看看如何使用FabricJS 建立具有背景顏色的畫布。由於 FabricJS 在 Canvas API 之上運作，因此我們將使用
此外，我們將該 id 傳遞給FabricJS API，以便它可以在
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js">
</script>
</head>
<body>
<h2>How to create a canvas with a background color using FabricJS</h2>
<p>Here we have used 'cyan' as the background color.</p>
<canvas id="canvas"> </canvas>
<script>
// Initiate a Canvas instance and add backgroundColor
var canvas = new fabric.Canvas('canvas', {
backgroundColor: 'cyan'
});
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>我們再舉一個例子。這裡我們將創建一個具有背景顏色的畫布，並在畫布上建立一個 Circle 物件。
<!DOCTYPE html>
<html>
<head>
<!-- Adding the FabricJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js">
</script>
</head>
<body>
<h2>How to create a canvas with a background color using FabricJS</h2>
<p>Here we have created a canvas with a background color and a circle object on the canvas</p>
<canvas id="canvas"> </canvas>
<script>
// Initiate a Canvas instance and add backgroundColor
var canvas = new fabric.Canvas('canvas', {
backgroundColor: 'cyan'
});
// Initiate a Circle instance
var circle = new fabric.Circle({
radius: 50,
fill: "red",
hoverCursor: 'not-allowed',
});
// Render the circle in canvas
canvas.add(circle);
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
</script>
</body>
</html>以上是如何使用 FabricJS 創建具有背景顏色的畫布？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
