Fabric. JS gradient

stay Vue3 Use in Fabric.js Achieve gradient (Gradient) effect , Including radial gradient radial

Fabric.js brief introduction

In official terms

Fabric.js It's a powerful and simple Javascript HTML5 canvas Tool library

Simply speaking , If you need to use canvas Do special effects or interaction , Then try Fabric.js This library , It will make development easier and intuitive .

Fabric.js Official website Fabric.js npm Address Fabric.js github Address

The development environment used in this article

In this case, we use Fabric.js 4.6 This version .

Used Vite structure Vue3 project .

Set up the project

npm init @vitejs/app

choice Vue3, Then initialize the project according to the prompt .

install Fabric.js

npm install fabric --save

Why is this article only about gradients ？

The gradient yes Fabric.js The basic function of , But most articles on the Internet only write Linear gradient , Few write Radial Gradient Of , Because the official doesn't seem to give Radial Gradient Example .

I've even seen some articles and comments saying Fabric.js Only support Linear gradient . But this statement is wrong ！！！

Take a look at this case ：【Fabric.js Gradient effect 】

you 're right , This paper only wants to prove that in Fabric.js 4.6 In this version, you can realize Radial Gradient Of .

Linear gradient linear

<template>  <canvas width="600" height="600" id="canvas" style="border: 1px solid #ccc;"></canvas></template><script setup>import { onMounted } from 'vue'import { fabric } from 'fabric'function init() {  let canvas = new fabric.Canvas('canvas') //  Instantiation fabric, And bind to canvas Element   //  round   let circle = new fabric.Circle({    left: 100,    top: 100,    radius: 50,  })  //  Linear gradient   let gradient = new fabric.Gradient({    type: 'linear', // linear or radial    gradientUnits: 'pixels', // pixels or pencentage  Pixels   perhaps   percentage     coords: { x1: 0, y1: 0, x2: circle.width, y2: 0 }, //  At least 2 Two coordinate pairs （x1,y1 and x2,y2） Defines how the gradient extends over the object     colorStops:[ //  Defines an array of gradient colors       { offset: 0, color: 'red' },      { offset: 0.2, color: 'orange' },      { offset: 0.4, color: 'yellow' },      { offset: 0.6, color: 'green' },      { offset: 0.8, color: 'blue' },      { offset: 1, color: 'purple' },    ]  })  circle.set('fill', gradient);  canvas.add(circle)}onMounted(() => {  init()})</script>

Radial Gradient radial

<template>  <canvas width="600" height="600" id="canvas" style="border: 1px solid #ccc;"></canvas></template><script setup>import { onMounted } from 'vue'import { fabric } from 'fabric'function init() {  let canvas = new fabric.Canvas('canvas')  //  Instantiation fabric, And bind to canvas Element   //  round   let circle = new fabric.Circle({    left: 100,    top: 100,    radius: 50,  })  let gradient = new fabric.Gradient({    type: 'radial',    coords: {      r1: 50, //  This attribute is only available for radial gradients , The radius of the outer circle       r2: 0, //  This attribute is only available for radial gradients , The radius of the outer circle         x1: 50, //  Focal x coordinate       y1: 50, //  Focal y coordinate       x2: 50, //  Center point x coordinate       y2: 50, //  Center point y coordinate     },    colorStops: [      { offset: 0, color: '#fee140' },      { offset: 1, color: '#fa709a' }    ]  })  circle.set('fill', gradient);  canvas.add(circle)}onMounted(() => {  init()})</script>

r1、r2、x1、y1、x2、y2 You can modify the values of these parameters and see the effect , If you change it yourself, you will understand it more deeply .

Warehouse address

This article is an online example

Sample code

give the thumbs-up + Focus on + Collection = Learned to