帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

js彩色渐变动画多边形(几何)图案背景特效

帝国模板之家 2020-11-28 网页特效 评论

插件介绍

这是是一个纯JavaScript库,根据SVG、Canvas或PNG从三角形生成彩色多边形(几何)图案背景特效插件。 

使用方法

1.在html页面中加载插件文件。

<script src="trianglify.min.js"></script>

2.插件初始化。

  • width:图案宽度
  • height:图案高度
  • cell_size:用于生成随机网格的单元格大小
  • variance:网格随机化多少
  • seed:起始随机数 
  • x_colors:x停止色
  • y_colors:y停止色
  • palette:用于“随机”颜色选项
  • color_space:用于渐变构造和插值的颜色空间
  • color_function:Color函数f(x,y),返回可由chroma js使用的颜色规范
  • stroke_width:笔划宽度。默认值为1.51以修复画布抗锯齿问题。
  • points:要三角剖分的[x,y]坐标数组。默认为“未定义”,并生成点。
var pattern = Trianglify({
    width: 600,
    height: 400,
    cell_size: 75,
    variance: 0.75,
    seed: null, 
    x_colors: 'random',
    y_colors: 'match_x',
    palette: colorbrewer, 
    color_space: 'lab',
    color_function: null,
    stroke_width: 1.51,
    points: undefined 
})

3.将多边形图案附加到元素。

// as Canvas
document.body.appendChild(pattern.canvas())

// as SVG
document.body.appendChild(pattern.svg())

// as PNG
document.body.appendChild(pattern.png())
只想记住美好的事物,而忘记不幸的事物,其实是种贪婪,这样反而会很难放空自己的思想。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言