css-doodle学习教程

什么是css-doodle?

一个用于使用CSS绘制图案的Web组件

使用方式

官网 https://css-doodle.com/
标签 <script src="https://unpkg.com/css-doodle@0.14.2/css-doodle.min.js"></script>
安装 yarn add css-doodle

属性介绍

@rand(开始[，结束])//返回两个数字之间的随机值，简写 @r
@last-pick(), @last-rand()//返回最后一个值，简写@lp,lr
@repeat(时间，值)//多次组合给定值，简写 @rep
@svg()//直接使用SVG作为背景图像
@hex(数字)//将数字转换为十六进制格式
@index()//返回单元格当前索引值，简写 @i
@row()//返回当前行号，简写 @y
@col()//返回当前列号，简写 @x
@size()//返回网络的总单元数，简写 @I
@size-row()//返回网格的最大行数，简写 @Y
@size-col()//返回网络的最大列数，简写 @X
@pick(1,.2,.1,3)//从给定列表中随机选择一个值，简写 @p
@pick-n()//从给定列表中一个接一个地选择一个值，简写@pn
@pick-d()//选择一个类似的值@pick-n()，但具有不同的随机顺序，简写 @pd
@multiple(时间，值)//与相同@repeat()，但以逗号分隔，简写@m,@M
@ n，@ nx，@ ny，@ N//仅在内部@repeat和@m函数中使用，以指示当前重复计数：@n，当前列计数：@nx，当前行计数：@ny 和最大计数值：@N
@at(列，行)//选择指定列和行单元格
@random([比率])//随机单元格


js
const doodle = document.querySelector('css-doodle');
@grid()//元素上属性的获取/设置
	doodle.grid = "5";
	console.log(doodle.grid);
@use()//元素上属性的获取/设置
	doodle.use = 'var(--my-rule)';
	console.log(doodle.use);
@seed()//元素上属性的获取/设置
	doodle.seed = 'my random seed';
	console.log(doodle.seed);
@update()//更新样式
	doodle.update(`
	  @grid: 6 / 8em;
	  background: rebeccapurple;
	  margin: .5px;
	`);
	doodle.update();
@options()//将css-doodle元素导出为图像。返回一个Promise对象，其中包含导出图像的信息
	选件
	scale: Integer导出图像的比例因子。默认1。
	detail: Boolean返回图像的详细信息，例如。斑点大小。默认false。
	download: Boolean是否下载图像。默认false。
	name: String保存的名称供下载。默认为当前时间戳
	button.addEventListener('click', async e => {
	  let result = await doodle.export({
	    scale: 6,
	    download: true
	  });
	  console.log(result);
	});

简单的dome

<css-doodle>
  :doodle {
    @grid: 10 / 100px;//网络
    @size:500px;//大小
    grid-gap: 4px;//相当于padding
    background: #B2DFDB;
}

transform: 
  scale(@rand(.1, 1.9)) //放大缩小
  translate3d(@rand(150px), @rand(200px), 0) //3D位置
  rotate(@rand(360deg));//旋转
background: hsla(@rand(100), 85%, @rand(90%, 100%), @rand(.9));
</css-doodle>