让我们用 JavaScript 创建一个像素画生成器。
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
我在之前的文章中向大家展示了如何使用 JavaScript 创建一个绘图应用。在本文中，我们将学习如何使用 HTML、CSS 和原生 JavaScript 创建一个像素艺术生成器。
像素画应用也是一款绘画应用，但它的像素较大，数量较少，因此画面细节不会很丰富。
视频教程请点击此处观看。
我们的应用程序将具备：
- 颜色选择器/输入框，用于更改画笔颜色。
- 一个重置按钮，用于重置我们的电网
- 可以通过该输入设置像素/网格的大小。
我们开始吧
那么，让我们创建index.html文件吧。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class="navbar">
<button class="btn">Reset</button>
<input type="color" value="#00eeff" class="color">
<input type="number" value="30" class="size">
</div>
<div class="container">
<!-- Here we will add divs representing our pixels -->
</div>
<script src="main.js"></script>
</body>
</html>
现在让我们在style.css 文件中设置它们的样式。
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100%;
}
body{
background-color: blueviolet;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.navbar, .container{
background-color: rgb(28, 28, 29);
width: 800px;
border-radius: 3px;
}
.navbar{
padding: 1em;
margin-bottom: 1em;
display: flex;
justify-content: center;
align-items: center;
}
.btn, input{
height: 35px;
padding: 0 1em;
}
.color{
padding: 0 .25em;
width: 100px;
margin: 0 1em;
}
.container{
--size: 4;
height: 800px;
display: grid;
grid-template-columns: repeat(var(--size), 1fr);
grid-template-rows: repeat(var(--size), 1fr);
gap: 3px;
padding: 3px;
}
.pixel{
background-color: rgb(61, 61, 61);
border-radius: 2px;
}
请注意，我们正在使用--size变量。我们将在 JavaScript 代码中更新它。
总之，现在如果我们用浏览器打开它，应该会看到类似这样的内容。
现在，让我们在 JavaScript 中用 div 元素填充容器，这些 div 元素将代表像素值。我们将为此
创建一个名为 `<div>` 的辅助函数。populate
const container = document.querySelector('.container')
const sizeEl = document.querySelector('.size')
const color = document.querySelector('.color')
const resetBtn = document.querySelector('.btn')
// Getting the value of the size input
let size = sizeEl.value
function populate(size) {
// Updating the --size CSS variable
container.style.setProperty('--size', size)
for (let i = 0; i < size * size; i++) {
const div = document.createElement('div')
div.classList.add('pixel')
container.appendChild(div)
}
}
populate(size)
现在你应该能看到一个网格。 好的，现在当我们按下鼠标并移动它时，我们想要给光标下的 div 元素着色。 所以让我们给像素添加一个事件。
mouseovermousdown
const container = document.querySelector('.container')
const sizeEl = document.querySelector('.size')
const color = document.querySelector('.color')
const resetBtn = document.querySelector('.btn')
let size = sizeEl.value
// We will only color our pixels if draw is set to true
let draw = false
function populate(size) {
container.style.setProperty('--size', size)
for (let i = 0; i < size * size; i++) {
const div = document.createElement('div')
div.classList.add('pixel')
div.addEventListener('mouseover', function(){
if(!draw) return
div.style.backgroundColor = color.value
})
div.addEventListener('mousdown', function(){
// We don't need to check if draw is true here
// because if we click on a pixel that means we want to draw that pixel
div.style.backgroundColor = color.value
})
container.appendChild(div)
}
}
// Set draw to true when the user press down the mouse
window.addEventListener("mousedown", function(){
draw = true
})
// Set draw to false when the user release the mouse
window.addEventListener("mouseup", function(){
draw = false
})
populate(size)
现在我们来实现重置按钮的功能。点击重置按钮后，我们只需清空容器内部的 HTML 内容，然后populate再次调用该函数即可。
const container = document.querySelector('.container')
const sizeEl = document.querySelector('.size')
const color = document.querySelector('.color')
const resetBtn = document.querySelector('.btn')
let size = sizeEl.value
let draw = false
function populate(size) {
container.style.setProperty('--size', size)
for (let i = 0; i < size * size; i++) {
const div = document.createElement('div')
div.classList.add('pixel')
div.addEventListener('mouseover', function(){
if(!draw) return
div.style.backgroundColor = color.value
})
div.addEventListener('mousdown', function(){
div.style.backgroundColor = color.value
})
container.appendChild(div)
}
}
window.addEventListener("mousedown", function(){
draw = true
})
window.addEventListener("mouseup", function(){
draw = false
})
function reset(){
container.innerHTML = ''
populate(size)
}
resetBtn.addEventListener('click', reset)
populate(size)
最后，当我们更改输入值时，我们希望创建一个具有输入大小的新网格。
const container = document.querySelector('.container')
const sizeEl = document.querySelector('.size')
const color = document.querySelector('.color')
const resetBtn = document.querySelector('.btn')
let size = sizeEl.value
let draw = false
function populate(size) {
container.style.setProperty('--size', size)
for (let i = 0; i < size * size; i++) {
const div = document.createElement('div')
div.classList.add('pixel')
div.addEventListener('mouseover', function(){
if(!draw) return
div.style.backgroundColor = color.value
})
div.addEventListener('mousdown', function(){
div.style.backgroundColor = color.value
})
container.appendChild(div)
}
}
window.addEventListener("mousedown", function(){
draw = true
})
window.addEventListener("mouseup", function(){
draw = false
})
function reset(){
container.innerHTML = ''
populate(size)
}
resetBtn.addEventListener('click', reset)
sizeEl.addEventListener('keyup', function(){
size = sizeEl.value
reset()
})
populate(size)
就这样，我们成功地使用原生 JavaScript 创建了一个像素画生成器。你可以在这里
找到完整的代码。
别忘了看看我的其他文章和YouTube频道。
对您有帮助吗？请在Patreon上支持我。
