【JavaScript】カラフルなパレットを作ってみる【canvas】

こんにちは、ともろう(@tomorrowSLog)です。

JavaScriptとcanvasを使ってカラフルなパレットを作ったので備忘録として残しておきます。

JSをがっつり書いていったのは今回が初めてなので、僕と同じようなJS初心者さんの手引きとなれば嬉しいです。

2019.04.08【JavaScript】google音声検索を自分で作ってみる【Web Speech API】

2019.04.08【プログラミング】リアルタイム音声文字起こし【JavaScript】

パステルパレット

開発言語

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行目

<!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>

<!doctype html>

<html>

<head>

<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>

</body>

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 パステルカラーのカラーコード(今回の円の色)はこちらより。