Rumah >hujung hadapan web >tutorial js >Bagaimana untuk membuat kanvas dengan warna latar belakang menggunakan FabricJS?

Bagaimana untuk membuat kanvas dengan warna latar belakang menggunakan FabricJS?

王林ke hadapan: 2023-09-14 20:09:08729semak imbas

如何使用 FabricJS 创建具有背景颜色的画布？

Dalam artikel ini, kami akan mencipta kanvas dengan warna latar belakang yang diberikan menggunakan FabricJS. Warna latar belakang lalai yang disediakan oleh API FabricJS adalah putih, yang boleh disesuaikan menggunakan parameter kedua.

Sintaks

new fabric.Canvas(element: HTMLElement|String, { backgroundColor: String }: Object)

Parameter

#🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜 🎜# - Parameter ini ialah elemen itu sendiri, anda boleh menggunakan document.getElementById() atau
adalah salah satu daripadanya, ia akan membantu kami menyesuaikan warna latar belakang
Contoh 1 Mari lihat cara membuat kanvas dengan warna latar belakang menggunakan FabricJS. Memandangkan FabricJS berfungsi di atas API Kanvas, kami akan mencipta elemen HTML menggunakan teg dan memberikannya
id

Selain itu, kami menghantar id itu kepada FabricJS API supaya ia boleh memulakan tika FabricJS Canvas pada teg

. Dalam parameter kedua kita akan lulus objek dengan kekunci

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 &#39;cyan&#39; as the background color.</p>
   <canvas id="canvas"> </canvas>
   <script>
      // Initiate a Canvas instance and add backgroundColor
      var canvas = new fabric.Canvas(&#39;canvas&#39;, {
         backgroundColor: &#39;cyan&#39;
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Contoh 2

Mari kita berikan satu lagi contoh. Di sini kita akan mencipta kanvas dengan warna latar belakang dan mencipta objek Bulatan pada kanvas.

<!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(&#39;canvas&#39;, {
         backgroundColor: &#39;cyan&#39;
      });
      // Initiate a Circle instance
      var circle = new fabric.Circle({
         radius: 50,
         fill: "red",
         hoverCursor: &#39;not-allowed&#39;,
      });
      // Render the circle in canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk membuat kanvas dengan warna latar belakang menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html 对象 canvas

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menetapkan kedudukan elips dari kiri menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk menetapkan kedudukan elips dari kiri menggunakan FabricJS?

Artikel berkaitan

Lihat lagi