如何用Fabric绘制一个彩虹渐变效果

14人浏览 / 0人评论 / 添加收藏

1、我们先看看用Fabric如何绘制普通纯色。

var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
   left:100,
   top:100,
   fill:'red',
   width:100,
   height:100
});
canvas.add(rect);

这里我们绘制一个纯色的正方形,效果如下:

 

2、绘制渐变(Gradients)效果

2.1 黑白渐变

渐变让我们将一种颜色混合到另一种颜色中,创造出一些令人惊叹的图形效果。

Fabric支持在所有对象上设置渐变填充或描边属性。为了给一个对象设置渐变,首先创建渐变,然后给它指定填充或描边。

var canvas = new fabric.Canvas("c"); 
var circle = new fabric.Circle({ 
   left: 100, 
   top: 100, 
   radius: 50, 
});

var gradient = new fabric.Gradient({ 
   type: "linear", 
   gradientUnits: "pixels", // or 'percentage' 
   coords: { x1: 0, y1: 0, x2: 0, y2: circle.height }, 
   colorStops: [ 
       { offset: 0, color: "#000" }, 
       { offset: 1, color: "#fff" }, 
   ], 
});

circle.set("fill", gradient); 
canvas.add(circle);

 

 

在上面的例子中,我们在100,100的位置创建一个圆圈,半径为50px。然后,我们将其填充设置为跨越整个圆形高度的渐变,从黑色到白色。 
渐变选项对象有2个主要属性,coords和colorStops。coords期望至少有2个坐标对(x1, y1和x2, y2),它们将定义渐变在对象上的扩展方式,而colorStops是一个定义渐变颜色的数组。数组中的每种颜色都由一个offset定义,它代表了它在渐变上的位置,一个color定义了颜色本身,最后是一个opacity属性。你可以定义尽可能多的颜色停止,只要它们的偏移范围从' 0 '到' 1 '。' 0 '表示渐变的开始,' 1 '表示渐变的结束。坐标相对于对象的左上角,所以圆的最高点为0,最低点为circle.height。 
你可以指定类型线性或径向获得2种不同的梯度,梯度单位默认为像素,但可以指定为“百分比”。percentage将允许以对象大小的百分比指定渐变大小,' 1 '表示对象大小的100%。 
这个设置对fabric.Text对象很有用。根据文本内容更改宽度或高度的文本对象。 
 

2.2 红蓝渐变

下面是一个从左到右的红蓝渐变的例子: 

var gradient = new fabric.Gradient({ 
   type: 'linear', 
   gradientUnits: 'pixels', // or 'percentage' 
   coords: { x1: 0, y1: 0, x2: circle.width, y2: 0 }, 
   colorStops:[ 
     { offset: 0, color: 'red' }, 
     { offset: 1, color: 'blue'} 
   ] 
 }) 
  
// or in percentage 
 var gradient = new fabric.Gradient({ 
   type: 'linear', 
   gradientUnits: 'percentage', 
   coords: { x1: 0, y1: 0, x2: 1, y2: 0 }, 
   colorStops:[ 
     { offset: 0, color: 'red' }, 
     { offset: 1, color: 'blue'} 
   ] 
 }) 
 

2.3 七色彩虹渐变

这是一个包含红橙黄绿青蓝紫七色彩虹🌈线性渐变,代码如下:

var canvas = new fabric.Canvas('canvas');
var circle= new fabric.Circle({
   left:100,
   top:100,
   radius:150,
   strokwidth:1,
   stroke:'red'
});

// 线性渐变
let gradient = new fabric.Gradient({
 type: 'linear', // linear or radial
 gradientUnits: 'pixels', // pixels or pencentage 像素 或者 百分比
 coords: { x1: 0, y1: 0, x2: circle.width, y2: 0 }, // 至少2个坐标对(x1,y1和x2,y2)将定义渐变在对象上的扩展方式
 colorStops:[ // 定义渐变颜色的数组
   { offset: 0, color: 'red' },
   { offset: 0.2, color: 'orange' },
   { offset: 0.4, color: 'yellow' },
   { offset: 0.5, color: 'green' },
   { offset: 0.6, color: 'cyan' },
   { offset: 0.8, color: 'blue' },
   { offset: 1, color: 'purple' },
 ]
})
circle.set('fill', gradient);

canvas.add(circle);

 效果图如下:

 

 

  

全部评论