在本文中，我們將使用 FabricJS 創(chuàng)建具有給定背景顏色的畫布。 FabricJS API 提供的默認(rèn)背景顏色是白色，可以使用第二個參數(shù)進(jìn)行自定義。
語法
new fabric.Canvas(element: HTMLElement|String, { backgroundColor: String }: Object)
登錄后復(fù)制
參數(shù)
元素 – 此參數(shù)是 元素本身，可以使用 document.getElementById() 或 元素本身的 id 派生。 FabricJS 畫布將在此元素上初始化。
選項 – 此參數(shù)是一個對象，它提供了額外的可定制性我們的畫布和 backgroundColor 就是其中之一，它將幫助我們自定義背景顏色
示例 1
讓我們看看如何使用 FabricJS 創(chuàng)建具有背景顏色的畫布。由于 FabricJS 在 Canvas API 之上工作，因此我們將使用 標(biāo)簽創(chuàng)建一個 HTML 元素，并為其指定一個 id。
此外，我們將該 id 傳遞給FabricJS API，以便它可以在 標(biāo)記上初始化 FabricJS Canvas 實例。在第二個參數(shù)中，我們將傳遞一個帶有鍵backgroundColor的對象以及我們想要的顏色值。
<!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>
登錄后復(fù)制
示例 2
我們再舉一個例子。這里我們將創(chuàng)建一個具有背景顏色的畫布，并在畫布上創(chuàng)建一個 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>
登錄后復(fù)制
以上就是如何使用 FabricJS 創(chuàng)建具有背景顏色的畫布？的詳細(xì)內(nèi)容，更多請關(guān)注www.92cms.cn其它相關(guān)文章！
