---
# System prepended metadata

title: '**ゼミナールB**'

---

# **ゼミナールB**
### **今回の目標**
「例4:Micro:bitのボタン操作応じて図形の色や形，大きさを変える」に挑戦して、canvasの使い方を学ぶ

### 図形の変化
ボタンAをおすと図形の形が、ボタンBを押すと図形の色が変わるプログラムを作成する

参考資料
・[【JavaScript】 Canvas上でクリックした線の色変更と移動](https://note.affi-sapo-sv.com/js-line-move.php)
・[キャンバスを作ってその上に描画する](https://developer.mozilla.org/ja/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it)
・[JavaScriptで図形を描画したい！canvasの基本とライブラリの活用方法](https://www.sejuku.net/blog/96127)
・[[JavaScript] canvasの内容をクリアする（.clearRect）](https://javascript.programmer-reference.com/js-canvas-clearrect/)

### 考え方
以前に作ったボタンサービスのプログラムを元に、ボタンが押された時の処理を変更する

### プログラム
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Micro:bitのボタン操作応じて図形の色や形を変える</title>
</head>

<body>
  <button onclick="scan()">スキャン</button>
  <button onclick="connect()">接続</button>
  <button onclick="getButton()">ボタン状態取得</button>
  <button onclick="disconnect()">切断</button>

  <canvas id = "myCanvas" width="300" height="300"></canvas>

<script>

const UUID_BUTTON_SERVICE = 'e95d9882-251d-470a-a062-fa1922dfa9a8'
const UUID_BUTTON_SERVICE_CHARACTERISTIC_A   = 'e95dda90-251d-470a-a062-fa1922dfa9a8'
const UUID_BUTTON_SERVICE_CHARACTERISTIC_B = 'e95dda91-251d-470a-a062-fa1922dfa9a8'

let device = null;
let service = null;

let service_button = null;
let char_buttonA = null;
let char_buttonB = null;

let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let color = ["red","blue","green","black","pink","orange","purple","lightblue"];
let i = 0;
let j = 0;

async function scan() {
  device = await navigator.bluetooth.requestDevice({
    filters: [
      {services: [UUID_BUTTON_SERVICE]},
      { namePrefix: "BBC micro:bit" }
    ]}
  );
}

async function connect() {
  server = await device.gatt.connect();
　alert('接続しました。');
}

async function getButton() {
  service_button = await server.getPrimaryService(UUID_BUTTON_SERVICE);
  char_buttonA = await service_button.getCharacteristic(UUID_BUTTON_SERVICE_CHARACTERISTIC_A);
  char_buttonB = await service_button.getCharacteristic(UUID_BUTTON_SERVICE_CHARACTERISTIC_B);
  await char_buttonA.startNotifications();
  char_buttonA.addEventListener('characteristicvaluechanged', ButtonAState);
  await char_buttonB.startNotifications();
  char_buttonB.addEventListener('characteristicvaluechanged', ButtonBState);
}

function ButtonAState(event) {
  let buttonA = event.target.value.getUint8(0);
  switch(buttonA) {
    case 1:
      i++;
      if(i % 3 == 0){
        ctx.clearRect(100, 100, 150, 150);  
        ctx.beginPath();
        ctx.rect(100, 100, 150, 150);
        ctx.fillStyle = color[j];
        ctx.fill();
        ctx.closePath();
      }else if(i % 3 == 1){     
        ctx.clearRect(100, 100, 150, 150);   
        ctx.beginPath();
        ctx.arc(175, 175, 75, 0, Math.PI*2);
        ctx.fillStyle = color[j];
        ctx.fill();
        ctx.closePath();
      }else if(i % 3 == 2){
        ctx.clearRect(100, 100, 150, 150);
        ctx.beginPath();
        ctx.moveTo(175,100);
        ctx.lineTo(250,250);
        ctx.lineTo(100,250);
        ctx.fillStyle = color[j];
        ctx.fill();
        ctx.closePath();
      }
      break;
  }
}

function ButtonBState(event) {
  let buttonB = event.target.value.getUint8(0);
  switch(buttonB) {
    case 1:
      j++;
      if(j > 7){
        j = 0;
      }
      if(i % 3 == 0){
        ctx.clearRect(100, 100, 150, 150);  
        ctx.beginPath();
        ctx.rect(100, 100, 150, 150);
        ctx.fillStyle = color[j];
        ctx.fill();
        ctx.closePath();
      }else if(i % 3 == 1){     
        ctx.clearRect(100, 100, 150, 150);   
        ctx.beginPath();
        ctx.arc(175, 175, 75, 0, Math.PI*2);
        ctx.fillStyle = color[j];
        ctx.fill();
        ctx.closePath();
      }else if(i % 3 == 2){
        ctx.clearRect(100, 100, 150, 150);
        ctx.beginPath();
        ctx.moveTo(175,100);
        ctx.lineTo(250,250);
        ctx.lineTo(100,250);
        ctx.fillStyle = color[j];
        ctx.fill();
        ctx.closePath();
      }
      break;
  }
}

function disconnect() {
  if (!device || !device.gatt.connected)
    return;
  device.gatt.disconnect();
  alert("切断しました。");
}
 
</script>
</body>
</html>

```
### 結果
ボタンを押すたびに図形の形と色を変更することができた
canvasの使い方が少しは分かってきたので、次は加速度なども用いてゲームの作成に挑戦したい