課題のためのチートシート

課題

課題専用のプレイグラウンドを使用して、 300px * 300pxのcanvasにアルバムアートをテーマに絵を書いてください。

条件:
繰り返し(for文)が使われていること
関数(function)が使われていること

1限用プレイグラウンド
2限用プレイグラウンド
C限用プレイグラウンド

基礎

基本的なJavaScriptの書き方は下記を別途参照してください。

座標

横の軸はX軸といいます。
左端が0で、右にいくほど数が大きくなり、もっとも右端が300になります

縦の軸はY軸といいます。
上端が0で、下にいくほど数が大きくなり、もっとも下端が300になります

四角を描画

ctx.fillRect(10,10,10,10)

線を描画

ctx.strokeLine(10,10,20,20)

色の指定(テンプレート構文)

Rは赤、Gは緑、Bは青です。それぞれの値を0~255の値で指定して、色を混ぜて指定します。

var r = 100
var g = 200
var b = 200
console.log(`rgb(${r},${g},${b})`)

色を変更

ctx.fillStyle = 'rgb(100,200,200)'

文字を出す

  ctx.font = "24px serif" // 文字のサイズと種類
  ctx.textAlign = "center" // 中央揃え
  ctx.fillText("hello world", 150, 150) //テキスト, x座標, y座標 

繰り返し (for文)

横一列に四角を書く

for(var i = 0; i < 30; ++i) {
  ctx.fillRect(10 * i, 10, 5, 5)
}

画面全体に四角を連続で書く

for(var i = 0; i < 30; ++i) {
  for(var j = 0; j < 30; ++j) {
    ctx.fillRect(10 * i, 10 * j, 5, 5)
  }
}

関数を使って円を書く

function fillCircle(x, y, radius) {
  ctx.beginPath()
  ctx.arc(x, y, radius, 0, 2 * Math.PI)
  ctx.fill()
  return true
}

fillCircle(10, 10, 10)

関数を使って線で描かれた円を書く

ctx.stroke() となっているところが塗りつぶしとの差分です。

function fillCircleStroke(x, y, radius) {
  ctx.beginPath()
  ctx.arc(x, y, radius, 0, 2 * Math.PI)
  ctx.stroke()
  return true
}

fillCircleStroke(10, 10, 10)

関数を使って複雑な図形を書く

function stamp (x, y) {
  ctx.fillRect(x, y+10, 30, 10)
  ctx.fillRect(x+10, y, 10, 30)
}

stamp(10,10)

乱数

Math.random()

0~100未満のランダムな値を取る

  Math.random() * 100

小数点の切り捨て

  Math.floor(1.2)

ランダムな位置に四角を描く

  var x = Math.random() * 290
  var y = Math.random() * 290
  ctx.fillRect(x, y, 10, 10)

複雑な図形を繰り返し書く

function stamp (x, y) {
  ctx.fillRect(x, y+10, 30, 10)
  ctx.fillRect(x+10, y, 10, 30)
}
  
for(var i = 0; i < 7; ++i) {
  stamp(10+i*40,10)
}

参考作品

作品1
作品2
作品3
作品4