调色、配色、生成图片，全能神器Mock.js助力完成毕业设计硕士答辩不求人

2024-01-06 22:48:52

在技术飞速发展的今天，计算机已广泛运用于各领域。其中，答辩作为本科学习生涯的最后一场考试，对于每位同学来说都至关重要。为了在期末答辩场上“一展雄风”，我一番研究之后，终于搞出了mockjs生成浅色图片的方案。

想要做出心仪的调调，首先要知道十六进制颜色码(#eeeeee)的原理。十六进制颜色码由 ‘#’和3个16进制数相连组成。其中，前两个16进制数代表红色，第三个16进制数代表绿色，第四个16进制数代表蓝色。例如，#ffffff表示纯白色，#000000表示纯黑色，#ff0000表示纯红色，#00ff00表示纯绿色，#0000ff表示纯蓝色。

掌握了十六进制颜色码的原理，就可以使用mockjs随机生成浅色图片了。mockjs是一个模拟数据的JavaScript库，它可以生成各种类型的数据，包括随机颜色。

// 导入mockjs库
import Mock from 'mockjs';

// 生成一个浅色图片
const color = Mock.Random.color('rgb(220, 220, 220, 0.5)');

// 将颜色转换为十六进制颜色码
const hexColor = Mock.Random.hex(color);

// 创建一个新的画布
const canvas = document.createElement('canvas');

// 设置画布的宽和高
canvas.width = 500;
canvas.height = 500;

// 获取画布的上下文
const ctx = canvas.getContext('2d');

// 使用十六进制颜色码填充画布
ctx.fillStyle = hexColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 将画布转换为图片
const image = canvas.toDataURL('image/png');

// 保存图片
const link = document.createElement('a');
link.href = image;
link.download = '浅色图片.png';
link.click();