MaterialImage

Working!

$ npm i material-image -S

使用方法

ES6 Module:

importMaterialImagefrom'material-image';constmyDom=document.querySelector('.my-dom');newMaterialImage({el: myDom,});

Script:

<!-- Use cdn --><scriptsrc="//unpkg.com/material-image/dist/materialImage.min.js"></script><script>varbody=document.querySelector('body');newMaterialImage({el: body});</script>

Configs:

参数	类型	默认值	描述
el	Element	body	插入canvas的DOM节点
debug	Boolean	false	调试模式开关
output	String	background	三种输出模式，可选值：background、image、canvas
imageType	String	jpeg	输出为图片时（background、image）的图片类型
quality	Number	1	输出为图片时（background、image）的图片质量，取值 0~1 之间

Methods:

名称	描述
protract	重新绘制canvas
adjust	调整canvas尺寸
destroy	移除canvas节点
toDataUrl	生成 base64Url，参数 (imageType, quality)

生成策略

随机一定数量的颜色，再随机画出不同尺寸、位置的图形（矩形和圆）。

开发计划

预定几种生成策略，比如同心圆、连续一定角度排列的矩形等。 添加元素移动效果。

Wait me!