資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何使用 FabricJS 建立具有背景顏色的畫布？
在本文中，我們將學習如何使用 FabricJS 建立具有指定背景顏色的畫布。FabricJS API 提供的預設背景顏色是白色，可以使用第二個引數進行自定義。
語法
new fabric.Canvas(element: HTMLElement|String, { backgroundColor: String }: Object)引數
element − 此引數是 <canvas> 元素本身，可以使用 document.getElementById() 或 <canvas> 元素本身的 id 獲取。FabricJS 畫布將在此元素上初始化。
Options − 此引數是一個物件，它為我們的畫布提供了額外的可定製性，而 backgroundColor 就是其中之一，它將幫助我們自定義背景顏色。
示例 1
讓我們看看如何使用 FabricJS 建立具有背景顏色的畫布。由於 FabricJS 基於 Canvas API，我們將使用 <canvas> 標籤建立一個 HTML 元素併為其指定一個 id。
接下來，我們將把該 id 傳遞給 FabricJS API，以便它可以在 <canvas> 標籤上初始化 FabricJS 畫布例項。在第二個引數中，我們將傳遞一個物件，其中包含鍵 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>示例 2
讓我們來看另一個例子。在這裡，我們將建立一個具有背景顏色和畫布上圓形物件的畫布。
<!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>
更新於：2022年5月19日
826 次瀏覽
廣告