こんにちは、ともろう(@tomorrowSLog)です。
JavaScriptとcanvasを使ってカラフルなパレットを作ったので備忘録として残しておきます。
JSをがっつり書いていったのは今回が初めてなので、僕と同じようなJS初心者さんの手引きとなれば嬉しいです。


パステルパレット
開発言語
- Javascript(メイン)
- Canvas
- HTML/CSS(必要に応じて)
開発環境
- Macbook Pro
- Chrome
デモンストレーション
注意
PC版Chrome最新版において動作確認をしていますこの記事でわかること
- Canvasで図を表示させる大体の流れ
- Canvasのフルスクリーン設定の仕方
- 円の表示と、マウスクリックの位置取得の手法
- JavaScript配列の中身をランダムで取得する
- JavaScriptのremove()の使い方
- Canvasの.globalAlphaで円の透明度を指定
- CSSテキストの縦表示の手法
実装の流れ
コード全文
- CSS: 6-20行目
- html本文: 22-25行目
- JavaScript: 26-52行目
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 |
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>Pastel Circles</title> <style> body { overflow: hidden; margin: 0; writing-mode: vertical-rl; } h1{ font-size:25px; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); margin: 0; } </style> </head> <body> <h1 onClick="rmv();" id="rmv">画面をタップしてみてね</h1> <canvas id="canvas"></canvas> </body> <script> function rmv() { document.getElementById("rmv").remove(); } var canvas = document.getElementById( 'canvas' ); canvas.width = window.innerWidth; canvas.height = window.innerHeight; canvas.onclick = function(e) { getPosition(e); }; var pointSize = 100; function getPosition(event){ var rect = canvas.getBoundingClientRect(); var x = event.clientX - rect.left; var y = event.clientY - rect.top; drawCoordinates(x,y); } function drawCoordinates(x,y){ var ctx = document.getElementById("canvas").getContext("2d"); var array = ["#ff7f7f", "#ff7fbf", "#ff7fff", "#bf7fff", "#7f7fff", "#7fbfff", "#7fffff", "#7fffbf", "#7fff7f", "#bfff7f", "#ffff7f", "#ffbf7f"]; ctx.fillStyle = array[Math.floor(Math.random() * array.length)]; ctx.beginPath(); ctx.arc(x, y, pointSize, 0, Math.PI * 2, true); ctx.globalAlpha = 0.8; ctx.fill(); } </script> </html> |
思考フロー
- Canvasで円を表示
- Canvasをフルスクリーンで適応
- 任意(マウスクリック)の位置で円を表示
- 円の色とサイズを設定
- インフォメーション文字の作成、アクション設定
参考サイト
参考 Draw points (circles) on a canvas with javascript html5colordic.org 大枠の骨組みと、アイデアはこのページからのオマージュです。 参考 HTML5 canvas full-screen and full-pageh3manth.com canvasをフルスクーリーンにする際にこのサイトを参考にしました 参考 配列からランダムに値をとりだす。qiita.com JS初心者すぎて配列とか、ランダムに中身を取り出すのとか覚えきれていません。まあgoogle先生が全部教えてくれましたが。 参考 パステルカラーourcodeworld.com パステルカラーのカラーコード(今回の円の色)はこちらより。
コメントを残す