小知识，大挑战！本文正在参与“程序员必备小知识”创作活动
本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金
介绍
本期给大家介绍一个十分有趣的绘制库——legra.js，顾名思义，他是一个专门绘制乐高图样的库。让你画使用乐高像HTML砖的形状元素。这个库定义了基本的图形基元，如直线、矩形、多边形、椭圆、贝塞尔曲线等。所有形状都被绘制为轮廓或填充。虽然很小众，但使用起来十分的有趣，也仿佛回到了童年。
本次我们简单介绍一下legra.js的使用方法，具体api怎么使用可以查阅官网，其实跟操作canvas api十分相似。另外，我们会做眨眼等小效果作为练习，其实就是玩~
正文
1.安装&使用
npm install --save legra
// 或者
yarn add legra
import Legra from "legra";
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext('2d');
canvas.width = ctx.width = window.innerWidth;
canvas.height = ctx.height = window.innerHeight;
const size = 24;
const legra = new Legra(ctx, size);
legra.line(6, 1, 1, 1, {
color: '#f42'
});
legra.line(1, 6, 1, 1, {
color: '#f42'
});
legra.line(9, 9, 2, 2, {
color: '#f42'
});
具体使用方法就是这样，我们获取到画布拿到绘制环境，就可以实例化Legra了。拿到legra就相当于canvas中的ctx。只是他所绘制的东西全部都是乐高积木的风格，另外注意的是，实例化的时候还可以设置一个块的大小哦。
我们在上面的代码中，画了三道线，第一道是横线，第二道是竖线，第三道是斜线。就这样简单变了一个乐高版的红色箭头。
2.图片乐高化
我们可以导入一张图片，用legra对其处理成乐高风格。
let image = new Image();
image.onload = function() {
let wh = image.width / image.height;
legra.drawImage(image, [0, 0], [~~(canvas.height * wh / size), ~~(canvas.height / size)]);
}
image.src = "./images/item.jpeg";
这里用legra.drawImage方法去绘制，传入加载好的图片，设置好放的位置和大小。另外，这里要注意一下，宽高这些值不能直接用画布获取到的像素值，而且乐高块去做单位，比如刚刚实例化的时候，我们的size设置成了24。这就是24个像素代表一个块。所以我们要计算横排要多少个块，竖排要多少个块这样去做。
接下来，就实现了我在宝可梦中的王牌——甲贺忍蛙！！
3.眨眼动画
我们要眨眼那么先要画眼睛
function drawEye(x, y, r, n) {
legra.circle(x, y, r, {
filled: false,
color: '#333'
});
legra.ellipse(x, y, r - 2, n, {
filled: true,
color: '#f12'
});
}
这里可以看到，我们用legra分别绘制了一个圆和一个椭圆，其位置x和y,半径为r。里面的椭圆要比大圆小，所以椭圆宽度要圆的半径减去一部分，又因为要眨眼椭圆的高度会不断发生改变所以用n表示。
剩下来的，就和我们在画布操作一样，不过本来也是画布。
let m = -1; // 方向
let r = 9; // 半径
let n = r - 3; // 初始化椭圆高度
let x = ~~(ctx.width / size) / 2; // x轴坐标-中心点
let y = ~~(ctx.height / size) / 2; // y轴坐标-中心点
setInterval(() => {
ctx.clearRect(0, 0, ctx.width, ctx.height);
n += m;
if (n <= 1 || n >= r - 3)
m *= -1;
drawEye(x, y, r, n);
}, 200)
这样我们每隔200ms绘制一次动画，就实现了一副恐怖的乐高眼，在线演示。
结语
准备的这三个案例大家是否熟悉了legra.js的大致使用方法，其实还有很多api等着你去学，当然也要发挥你的想想创造出更有趣的乐高作品~
