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

課題

課題専用のプレイグラウンドを使用して、 HTMLを使ったアプリを作ってください。

条件:
- HTMLとjsが連動して動いていること
- 再実行しなくても、繰り返し操作しつづけられること
- 指定のプレイグラウンドを使用すること
- 画像を使用する場合は権利クリアなこと
- 画像の取得元URLが記述されていること
(自作画像の場合は自作と記述)
1限用プレイグラウンド
2限用プレイグラウンド
C限用プレイグラウンド

基礎

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

HTML

HTML 言語は、訪れたウェブサイトの構成をブラウザに対して伝えるために使うマークアップ言語です。 HTML は要素の集まりからなり、コンテンツの一部を要素で囲む（マークアップする）ことで、特定の見せ方・動かし方に変えられます。 囲むためのタグは、**文章構造上の意味を表し**、コンテンツの一部をハイパーリンク (ウェブ上の別ページへリンクすること) にしたり、単語を斜体にしたりすることができます。

HTMLの書き方

  <p>こんにちは、みなさん</p>

見出し

  <h1>見出しです。</h1>

  <h1>見出し1</h1>
  <h2>見出し2</h2>
  <h3>見出し3</h3>
  <h4>見出し4</h4>
  <h5>見出し5</h5>
  <h6>見出し6</h6>

段落

  <p>これは段落です。</p>

改行

<br> タグを使用します

  <p>
  ああああ<br>
  いいいい<br>
  うううう<br>
  </p>

プログラムとHTMLを連動させる

HTMLタグの属性

属性には、実際のコンテンツには表示させたくない、要素に関する追加情報を付与できます。

  <button id="btn1">ボタン</button>

ボタンを押した時のイベントの追加

  var btn1 = document.getElementById('btn1')
  function onPressedBtn1() {
    console.log('おしたよ')
  }
  btn1.addEventListener('click', onPressedBtn1)

HTML操作

要素を取得する

HTML

  <div id="parent"></div>

js

  var parent = document.getElementById('parent')

マウスインタラクション

マウスを押した時を検知

canvas内にカーソルを合わせてマウスを押すと、x,y軸の座標がlogに出力されます。
※スマホの場合は mousedown を touchstartに変更してください

  // マウスを押した時に実行される関数
  function onMouseDown(e) {
    console.log('mosuedown', e.offsetX, e.offsetY)
  }

  // マウスを押した時の関数を登録
  canvas.addEventListener('mousedown', onMouseDown)

マウスを離した時を検知

canvas内にカーソルを合わせてマウスクリックを離すと、x,y軸の座標がlogに出力されます。
※スマホの場合は mouseup を touchendに変更してください

  // マウスを離した時に実行される関数
  function onMouseUp(e) {
    console.log('mosueup', e.offsetX, e.offsetY)
    isMouseDown = false
  }

  // マウスを離した時の関数を登録
  canvas.addEventListener('mouseup', onMouseUp)

マウスを動かした時を検知

canvas内でマウスを動かすと、x,y軸の座標がlogに出力されます。
※スマホの場合は mousemove を touchmoveに変更してください

  // マウスを動かした時に実行される関数
  function onMouseMove(e) {
    console.log('mosuemove', e.offsetX, e.offsetY)
  }

  // マウスを動かした時の関数を登録
  canvas.addEventListener('mousemove', onMouseMove)

線を引く

  ctx.beginPath() // pathの描画を開始
  ctx.moveTo(10,10) // pathの開始位置を指定
  ctx.lineTo(100,100) // pathの２点目の位置を指定
  ctx.closePath() //pathを閉じる 
  ctx.stroke() // 線を引く

複雑な図形を描く

  ctx.beginPath() // pathの描画を開始
  ctx.moveTo(10,10) // pathの開始位置を指定
  ctx.lineTo(20,20) // pathの２点目の位置を指定
  ctx.lineTo(0,20) // pathの3つ目の点の位置を指定
  ctx.closePath() //pathを閉じる 
  ctx.fill() // パスの中を塗りつぶす

お絵描きアプリ

HTML

<button id="clear-btn">クリア</button>
<button id="default-btn">四角ブラシ</button>
<button id="triangle-btn">三角ブラシ</button>

JavaScript

  var brush = 'default'
  var isMouseDown = false // 真偽値

  function drawTriangle(x,y) {
    ctx.fillStyle = 'red'
    ctx.beginPath()
    ctx.moveTo(x + 10, y + 10)
    ctx.lineTo(x + 20, y + 20)
    ctx.lineTo(x + 0,y + 20)
    ctx.closePath() 
    ctx.fill()
  }

  function onMouseDown(e) {
    isMouseDown = true
  }
  canvas.addEventListener('mousedown', onMouseDown)

  function onMouseMove(e) {
    if(isMouseDown) {
      ctx.fillStyle = 'black'
      if(brush === 'default') {
        ctx.fillRect(e.offsetX, e.offsetY,10,10)
      } else if(brush === 'triangle') {
        drawTriangle(e.offsetX, e.offsetY)
      }
    }
  }
  canvas.addEventListener('mousemove', onMouseMove)

  function onMouseUp(e) {
    isMouseDown = false
  }
  canvas.addEventListener('mouseup', onMouseUp)

  function clear() {
    // 下地を白で塗りつぶす
    ctx.fillStyle = 'white'
    ctx.fillRect(0, 0, 300, 300)
  }

  var clearBtn = document.getElementById('clear-btn')
  function onClickClearBtn() {
    clear()
  }
  clearBtn.addEventListener('click', onClickClearBtn)

  var defaultBtn = document.getElementById('default-btn')
  function onClickDefaultBtn() {
    brush = 'default'
  }
  defaultBtn.addEventListener('click', onClickDefaultBtn)

  var triangleBtn = document.getElementById('triangle-btn')
  function onClickTriangleBtn() {
    brush = 'triangle'
  }
  triangleBtn.addEventListener('click', onClickTriangleBtn)

参考作品

作品1
作品2