前言

今天要來研究的是 canvas～ 踩下去才發現是一個大坑XD，以下先從最基本的開始認識起，最後再來嘗試畫出自己的視力檢查表

codepen實作

canvas 基本認識

• 是 HTML 元素，和<img> 類似，但沒有src和alt屬性，可透過 JS 操作來繪圖
• 預設尺寸為 300 px × 150 px
• 只有兩個屬性：width 和 height，沒有指定大小就會是上述的預設尺寸
• 可以用 DOM 操作給予屬性
• 初始狀態是透明的，必須透過腳本取得畫布再用語法畫圖
• canvas 使用的語法參數 x 及 y 都是相對於畫布左上角（0,0）位置的距離（對照下圖會比較清楚）

建立畫布的方式很簡單，就是在 HTML 輸入<canvas>標籤

<canvas class=".canvas" width="150" height="150"></canvas>

再用操作 DOM 元素方式取得 canvas 元素後，使用getContext方法取得渲染環境，這個方法接受一個參數來指定是幾維度的繪圖

const canvas = document.querySelector('.canvas'); const ctx = canvas.getContext('2d');

有了基本的設定後就可以來繪製圖型了～

繪製矩形

• 以下三個方式會立即將矩形繪製到畫布上
• ctx.fillRect(x, y, width, height): 繪製填滿的矩形
• ctx.strokeRect(x, y, width, height): 繪製空白矩形
• ctx.clearRect(x, y, width, height): 清除矩形區域

透過這些語法和更改線條樣式的語法就可以畫出下面的圖樣

可以用codepen觀察會比較清楚每個方法做到的效果

需要注意的地方是，如果要改變顏色，改變顏色的語法必須在繪製方法前喔！

繪製弧形

ctx.arc(x, y, radius, startAngle, endAngle [, counterclockwise])

弧形的語法需要五個參數，x,y代表圓心在畫布上的位置，根據radius為半徑畫圓，可以利用startAngle 和 endAngle指定開始和結束的位置，counterclockwise是個非必要的參數，接受布林值，預設是 false，代表順時針繪製，true 則為逆時針繪製

MDN 特別註記: arc()方法用的是弧度(radians)而非角度(degrees)，如果要在弧度與角度間換算，需要經過轉換，轉換的語法如下

radians = (Math.PI/180)* degrees

圖片來源：HTML5 Canvas Line Tutorial

小小練習

看著 MDN 示範弧形操作時，聯想到了視力檢查會出現的Ｃ型環，於是有了以下的練習，在開始前先認識一下 C 型視力表的設計

C 型視力表，又名蘭氏環形視力表（Landolt C），由瑞士眼科醫生Edmund Landolt 於19世紀發明，主要特色為：

1. 有8個開口方向（E字視力表只有四個方向）
2. 筆畫粗細以及開口大小是直徑的五分之一

開始練習～

步驟1: 在 HTML 建立 canvas

<canvas width="400px" height="600px"></canvas>

步驟2: 建立一個可以重複畫Ｃ型環的函式

1. 因為筆畫粗細和直徑是 1:5 的關係，而arc()接受的參數是半徑，所以這裡有做一下轉換
2. 考量開口的方向會有八個角度，這裡的想法是先固定開口距離，再換算開始和結束的角度

function drawC(x, y, lineWidth, gapDirection) {
  const ctx = canvas.getContext('2d');
  ctx.lineWidth = lineWidth;
  const radius = ctx.lineWidth * 2.5;
  const gap = 12;
  const startAngle = (gapDirection + gap) * (Math.PI/180);
  const endAngle =  (gapDirection - gap) * (Math.PI/180);
  
  ctx.beginPath();
  ctx.arc(x,y,radius,startAngle,endAngle);
  ctx.stroke();
}

步驟3: 使用函式畫出六排的 C 型環

// 第一排
drawC(100, 80, 20, 180);
drawC(300, 80, 20, 0);

// ...略 （前三排都先直接輸入數值）

// 第四排以後
const rotationDegree = 45; 

for (let x = 50; x <= 350; x+= 60) {
  const rotationRatio = Math.floor((Math.random() * 9));
  const direction = 0 + rotationRatio * rotationDegree;
  drawC(x, 320, 4, direction);
}

完成～

結語

每天盯著電腦工作又寫鐵人賽的大家記得要定期檢查視力喔～

參考資料：

MDN
Landolt C