こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、JavaScriptでDrawingアプリケーションの実装方法を学びました。
demoは「こちら」で確認できます。
環境構築
簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
CSS版
ページ(HTML)の作成
最初にページを作成しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Drawing App</title> </head> <body> <canvas id="canvas" width="800" height="700"></canvas> <div class="toolbox"> <button id="decrease">-</button> <span id="size">10</span> <button id="increase">+</button> <input type="color" id="color"> <button id="clear">X</button> </div> <script src="script.js"></script> </body> </html> |
このHTMLをブラウザ上で表示すると以下のようになります。
スタイル(CSS)を装飾
次にスタイルを記述しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { background-color: #f5f5f5; font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; margin: 0; } canvas { border: 2px solid steelblue; } .toolbox { background-color: steelblue; border: 1px solid slateblue; display: flex; width: 804px; padding: 1rem; } .toolbox > * { background-color: #fff; border: none; display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; height: 50px; width: 50px; margin: 0.25rem; padding: 0.25rem; cursor: pointer; } .toolbox > *:last-child { margin-left: auto; } |
ここまで実装すると以下のようになります。
JavaScriptの実装
準備が完了したので、Drawingアプリを実装していきましょう。
今回は、Canvas APIを使用します。このAPIは、JavaScriptとHTMLのcanvas要素を介してグラフ描画の手段を提供します。
要素を取得する
画面操作に必要な要素を取得します。
|
1 2 3 4 5 6 7 8 |
// 要素を取得する const canvas = document.getElementById('canvas'); const increaseBtn = document.getElementById('increase'); const decreaseBtn = document.getElementById('decrease'); const sizeEL = document.getElementById('size'); const colorEl = document.getElementById('color'); const clearEl = document.getElementById('clear'); const ctx = canvas.getContext('2d'); |
以下の二つは、Canvas APIを使うためのイディオムみたいなもので、必須です。ctx定数には、canvasを操作できる様々な情報が詰まっています。
|
1 2 |
const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); |
円を描画する
早速、Canvas APIを使って見ましょう。最初は、円を描画してみます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// 描画条件 let size = 20 let color = 'balck' let isPressed = false let x let y function drawCircle(x, y) { // 描画開始 ctx.beginPath() // 円を描く // CanvasPath.arc( // x: number, y: number, radius: number, startAngle: number, // endAngle: number, anticlockwise?: boolean): void ctx.arc(x, y, size, 0, Math.PI * 2) // 色を指定 ctx.fillStyle = color // 描画 ctx.fill() } drawCircle(100, 200) |
arcメソッドは、円を描くことができるメソッドです。
線を描画する
線を描画してみましょう。
|
1 2 3 4 5 6 7 8 9 10 |
function drawLine(x1, y1, x2, y2) { ctx.beginPath() ctx.moveTo(x1, y1) ctx.lineTo(x2, y2) ctx.strokeStyle = color ctx.lineWidth = size * 2 ctx.stroke() } drawLine(300, 300, 300, 500) |
線を描くには、moveToメソッドやlineToメソッドを上手く組み合わせる必要があります。moveToは描画開始位置、lineToは描画終了位置ですね。
そして、線を引くには、strokeメソッドを呼びます。
mousedownイベントの登録
画面描画をするために、mousedownイベントを登録しましょう。
|
1 2 |
// mousedownの登録 canvas.addEventListener('mousedown', (e) => {}) |
mousedownイベントは、マウスが画面にポイントされた時に発火するイベントです。
マウスポイントの位置を取得
続いて、マウスがポイントされた位置を取得します。ここは結構重要かもです。
|
1 2 3 4 5 6 7 8 9 10 |
// マウスイベントの登録 canvas.addEventListener('mousedown', (e) => { // ポイントを当てていることを示す isPressed = true // マウスがポイントされた位置を取得 x = e.offsetX y = e.offsetY }) |
mousedownイベント発生時に取得できるoffsetXやoffsetYは、ポイントされた位置を取得できます。
この数値を先ほど作成した円・線描画関数に渡してあげると、画面描画ができそうですね。
mouseupイベントの登録
続いて、mouseupイベントを登録します。これは、マウスのポインタを外した時に発火するイベントです。
|
1 2 3 4 5 6 7 8 9 |
// mouseupの登録 canvas.addEventListener('mouseup', (e) => { // ポイントを外したことを示す isPressed = false // マウスのポインタ位置を初期化 x = undefined y = undefined }) |
mousemoveイベントの登録
続いて、mousemoveイベントを登録します。これは、画面にポインタされたマウスのカーソルが動いている時に発火するイベントです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// mousemoveの登録 canvas.addEventListener('mousemove', (e) => { if(isPressed) { // mousedown時に描画開始位置を取得するので // 最後にカーソルを当てたところを終了位置として // 格納する const x2 = e.offsetX const y2 = e.offsetY // 円と線を組み合わせるのがミソ drawCircle(x2, y2) drawLine(x, y, x2, y2) x = x2 y = y2 } }) |
これで、描画ができるようになります。
円(点)と線を結んで、綺麗な描画ができていますね。
あとは、色を変えたり、描画サイズを変更する処理がありますが、今まで作成してきたアプリケーションと同じような処理なので、簡単な説明までに留めておきます。
色を変更する
描画できる線の色は黒一色なので、色を扱えるようにしましょう。
|
1 2 |
// 色の変更 colorEl.addEventListener('change', (e) => color = e.target.value) |
描画サイズの変更
次は、描画サイズを変更します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
// 描画サイズの変更 increaseBtn.addEventListener('click', () => { size += 5 // 最大50まで if (size > 50) { size = 50 } updateSizeOnScreen() }) decreaseBtn.addEventListener('click', () => { size -= 5 // 最大50まで if (size < 0) { size = 5 } updateSizeOnScreen() }) function updateSizeOnScreen() { sizeEL.innerHTML = size } |
クリア機能
最後に、描画をクリアする機能を実装します。
|
1 2 3 |
// 描画をクリアする clearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height)) |
これで完成です。
おわりに
画面描画は難しいと思っていましたが、工程を分けて考えるとそれほど難しくありませんね。
描画もできるようになったので、ますます面白いアプリケーションが作れるようになった気がします^^
それでは、また！
JavaScriptまとめ
JavaScript ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
// 要素を取得する const canvas = document.getElementById('canvas'); const increaseBtn = document.getElementById('increase'); const decreaseBtn = document.getElementById('decrease'); const sizeEL = document.getElementById('size'); const colorEl = document.getElementById('color'); const clearEl = document.getElementById('clear'); const ctx = canvas.getContext('2d'); // 描画条件 let size = 20 let color = 'balck' let isPressed = false let x let y function drawCircle(x, y) { // 描画開始 ctx.beginPath() // 円を描く ctx.arc(x, y, size, 0, Math.PI * 2) // 色を指定 ctx.fillStyle = color // 描画 ctx.fill() } function drawLine(x1, y1, x2, y2) { ctx.beginPath() ctx.moveTo(x1, y1) ctx.lineTo(x2, y2) ctx.strokeStyle = color ctx.lineWidth = size * 2 ctx.stroke() } // mouesdownの登録 canvas.addEventListener('mousedown', (e) => { // ポイントを当てていることを示す isPressed = true // マウスがポイントされた位置を取得 x = e.offsetX y = e.offsetY }) // mouseupの登録 canvas.addEventListener('mouseup', (e) => { // ポイントを外したことを示す isPressed = false // マウスのポインタ位置を初期化 x = undefined y = undefined }) // mousemoveの登録 canvas.addEventListener('mousemove', (e) => { if(isPressed) { // mousedown時に描画開始位置を取得するので // 最後にカーソルを当てたところを終了位置として // 格納する const x2 = e.offsetX const y2 = e.offsetY // 円と線を組み合わせるのがミソ drawCircle(x2, y2) drawLine(x, y, x2, y2) x = x2 y = y2 } }) // 色の変更 colorEl.addEventListener('change', (e) => color = e.target.value) // 描画サイズの変更 increaseBtn.addEventListener('click', () => { size += 5 // 最大50まで if (size > 50) { size = 50 } updateSizeOnScreen() }) decreaseBtn.addEventListener('click', () => { size -= 5 // 最大50まで if (size < 0) { size = 5 } updateSizeOnScreen() }) function updateSizeOnScreen() { sizeEL.innerHTML = size } // 描画をクリアする clearEl.addEventListener('click', () => ctx.clearRect(0,0, canvas.width, canvas.height)) |
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/190f24cd.7532be9b.190f24ce.766b3442/?me_id=1213310&item_id=18177978&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F4111%2F9784774184111.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。