ポートフォリオサイト公開中

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

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

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

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



【JavaScript】google音声検索を自分で作ってみる【Web Speech API】 【JavaScript】google音声検索を自分で作ってみる【Web Speech API】 【プログラミング】リアルタイム音声文字起こし【JavaScript】 【プログラミング】リアルタイム音声文字起こし【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>

思考フロー

  1. Canvasで円を表示
  2. Canvasをフルスクリーンで適応
  3. 任意(マウスクリック)の位置で円を表示
  4. 円の色とサイズを設定
  5. インフォメーション文字の作成、アクション設定

参考サイト

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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です