— javascript, tutorials — 1 min read
前回はCanvasの使い方を見ました。Canvasを使うと自由に四角形や円が書けます。 +JavaScript道場:十一日目 / DOM操作 その❷
今日はMath(数学的な処理をするための便利な機能を持ったクラス)を使って、ランダムなカラーコードを生成して見たいと思います。
前回作成したHTMLを用意して開いておいてください。準備はいいですか?
四角形が描画できたら、あとはランダムなカラーを fillStyle
プロパティにセットして、たくさん四角形を書けばOK。
#000000
#696969
#f5deb3
といった色を表す文字データ#
で始まり、後ろに6桁の 0~f
の文字が並ぶ1// 前回作成したHTMLで実行すること!!2// コンソールで実行してみよう3var canvas = document.getElementById('canvas')4var ctx = canvas.getContext('2d')5 6ctx.fillStyle = randomColorCode() // 色を指定する7ctx.fillRect(50, 50, 200, 200) // 矩形で塗り潰すエリア8 9// #000000 ~ #ffffff までの色コードを返す関数10function randomColorCode() {11 var randomColor = "#"12 for(var i = 0; i < 6; i++) {13 randomColor += generateHexCharacter()14 }15 16 // ランダムな16進数を一文字返す関数17 function generateHexCharacter(){18 return Math.floor(16*Math.random()).toString(16)19 }20 21 return randomColor22}
余裕がある人は、円や線を沢山書いてみましょう。(JavaScriptを使って!ですよ)