X-HACK

【12日目】DOM操作 DOM操作 その❸

javascript, tutorials1 min read

前回の続き・・・

前回はCanvasの使い方を見ました。Canvasを使うと自由に四角形や円が書けます。 +JavaScript道場:十一日目 / DOM操作 その❷

今日はMath(数学的な処理をするための便利な機能を持ったクラス)を使って、ランダムなカラーコードを生成して見たいと思います。

前回作成したHTMLを用意して開いておいてください。準備はいいですか?

ランダムなカラーコードを生成するコードを書いてみよう

四角形が描画できたら、あとはランダムなカラーを fillStyle プロパティにセットして、たくさん四角形を書けばOK。 カラーコードのサンプル

  1. カラーコードとは、#000000 #696969 #f5deb3 といった色を表す文字データ
  2. 先頭は # で始まり、後ろに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 randomColor
22}

調べてみよう

  • toString(16) とは?
  • Math.floor とは?
  • Math.random とは?

コードを書いてみよう

1. forを使ってたくさん四角形を書いてみよう

2. 四角形を沢山生成する処理を関数として定義しよう

3. setIntervalを使って一定間隔で四角形を沢山書く関数を実行しよう

解説は次回!

余裕がある人は、円や線を沢山書いてみましょう。(JavaScriptを使って!ですよ)


次回はこちら JavaScript道場:13日目 / DOM操作 その❹