JavaScriptでピクセルアートメーカーを作ろう

34205 ワード
webdev beginners javascript tutorial テキストリンク
私はあなたのJavaScriptを使用してペイントアプリケーションを作成する方法を示している.そして、この記事では、HTML、CSSとバニラJSを使用してピクセルアートジェネレータを作成する方法を学びます.

Pixel art app is also a drawing/paint app but you have big pixels so they are less in number so your drawing won't be that detailed



Video tutorial available here



我々のアプリがあります.
  • カラーピッカー/入力私たちのブラシの色を変更する
  • リセットボタンをリセットするグリッド
  • ピクセル/グリッドのサイズを設定できる入力

    • 始めましょう
    インデックスを作成します.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>
    そして今、私たちのスタイルでスタイルをすることができます.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を持つコンテナを配置できます.
    ヘルパー関数を作成します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を色にしたいです.
    だからmouseover and mousdown イベントのピクセル
    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を使用してピクセルアートの作成を作成している.
    完成したコードを見つけることができますhere .
    チェックアウト私の他の記事やYouTubeチャンネルを確認してください
    ・・・アクションボタン
    背景色:こっち重要
    カラー:竜華ffffff!重要
    ボーダーカラー:こっち重要
    ｝
    Shuvo フォロー
    Frontend Developer and YouTuber. Channel link: https://www.youtube.com/c/AngleBrace
    width ="710 "< br/>
    高さ= "399 "< br/>
    src = "https://www.youtube.com/embed/uWAn5TFZY_E< br/>
    アローフルスクリーン
    「怠惰」とはbr/>

    役に立ちましたか.パトロンで私を支えてください
    UserServiceの作成
    leetcode 48 :画像を回転する