Bagaimana untuk membuat kanvas dengan warna latar belakang menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk membuat kanvas dengan warna latar belakang menggunakan FabricJS?

王林

Lepaskan： 2023-09-14 20:09:08

ke hadapan

696 orang telah melayarinya

如何使用 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)

Salin selepas log masuk

Parameter

#🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜🎜 🎜# - Parameter ini ialah elemen itu sendiri, anda boleh menggunakan document.getElementById() atau

- Parameter ini ialah objek yang menyediakan kebolehubahsuaian tambahan pada Kanvas dan #🎜 kami #backgroundColor
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>  <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>
Salin selepas log masuk
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>  <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>
Salin selepas log masuk
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!