fabric操作canvas绘图-（三）渐变

之前的文章中，我们已经实现了如何创建图形，现在可以用渐变来填充。

一，线性渐变

 const canvas = new fabric.Canvas("canvas"); canvas.setBackgroundColor("rgb(100,200,200)"); const rect = new fabric.Rect({ 
    left: 50, top: 50, width: 50, height: 50, fill: "yellow", originX: 'center',//调整中心点的X轴坐标 originY: 'center'//调整中心点的Y轴坐标 }); const gradient = new fabric.Gradient({ 
    type:"linear",//线性渐变，可取值：linear or radial gradientUnits:"pixels",//以像素做基本单位 coords:{ 
   x1:0,y1:0,x2:0,y2:rect.height},//线性渐变的起点和终点 colorStops:[ { 
   offset:0,color:"#000",}, { 
   offset:1,color:"#fff"} ] //线性渐变的颜色分层，offset：0是起点，1是终点，中间可以多层 }) rect.set("fill",gradient) canvas.add(rect); 

实现的效果：

二，多层线性渐变

 const canvas = new fabric.Canvas("canvas"); canvas.setBackgroundColor("rgb(100,200,200)"); const rect = new fabric.Rect({ 
    left: 50, top: 50, width: 50, height: 50, fill: "yellow", originX: 'center',//调整中心点的X轴坐标 originY: 'center'//调整中心点的Y轴坐标 }); const gradient = new fabric.Gradient({ 
    type:"linear",//线性渐变，可取值：linear or radial gradientUnits:"pixels",//默认为像素，但可以指定为百分比:pixels or pencentage coords:{ 
   x1:0,y1:0,x2:0,y2:rect.height},//线性渐变的起点和终点 colorStops:[ { 
   offset:0,color:"#000"}, { 
   offset:0.5,color:"red"}, { 
   offset:1,color:"#fff"} ] //线性渐变的颜色分层，offset：0是起点，1是终点，中间可以多层 }) rect.set("fill",gradient) canvas.add(rect); 

实现的效果：

三，径向渐变

fabric是可以实现径向渐变的，具体的参数和上文没差，改成径向即可：

 const canvas = new fabric.Canvas("canvas"); canvas.setBackgroundColor("rgb(100,200,200)"); const rect = new fabric.Rect({ 
    left: 0, top: 0, width: 100, height: 100, fill: "yellow", // originX: 'center',//调整中心点的X轴坐标 // originY: 'center'//调整中心点的Y轴坐标 }); const gradient = new fabric.Gradient({ 
    type:"radial",//线性渐变，可取值：linear or radial gradientUnits:"pixels",//默认为像素，但可以指定为百分比:pixels or pencentage coords:{ 
    r1: 50, // 该属性仅径向渐变可用，外圆半径 r2: 5, // 该属性仅径向渐变可用，外圆半径  x1: 50, // 径向焦点的 X 坐标 y1: 50, // 径向焦点的y坐标 x2: 50, // 中心点的x坐标, y2: 50, // 中心点的y坐标, }, colorStops:[ { 
   offset:0,color:"blue"}, { 
   offset:1,color:"#fff"} ] //线渐变的颜色分层，offset：0是起点，1是终点，中间可以多层 }) rect.set("fill",gradient) canvas.add(rect); }, 

实现的效果：

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/rfx/10954.html