MaterialImage
Working!
$ npm i material-image -S使用方法
ES6 Module:
import MaterialImage from 'material-image';
const myDom = document.querySelector('.my-dom');
new MaterialImage({
el: myDom,
});Script:
<!-- Use cdn -->
<script src="//unpkg.com/material-image/dist/materialImage.min.js"></script>
<script>
var body = document.querySelector('body');
new MaterialImage({
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!