# 按 F 全螢幕＋畫布跟著視窗

正式網址：https://newmediaart.course.monolab.world/snippets/fullscreen-resize

fullscreen() 切換全螢幕；視窗大小一變 p5 會呼叫 windowResized()，在裡面 resizeCanvas() 畫布就永遠填滿視窗。

- **分類**：畫布與視窗
- **行數**：24 行（p5.js 1.x／2.x）

把 createCanvas 改成 windowWidth、windowHeight，再貼上 keyPressed 和 windowResized；按 Esc 也能離開全螢幕。沒畫 background() 的筆刷作品，換尺寸時畫過的東西會被清掉。

```js
// 按 F 切換全螢幕；視窗大小一變，畫布跟著變
function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(15);
  // 位置和大小用 width、height 算，不要寫死數字：畫布怎麼變都會置中
  noFill();
  stroke(255);
  strokeWeight(3);
  circle(width / 2, height / 2, min(width, height) * 0.6);
}

function keyPressed() {
  if (key === 'f' || key === 'F') {
    fullscreen(!fullscreen()); // 現在不是全螢幕就打開，是就關掉
  }
}

// 視窗大小改變（包含進出全螢幕）時，p5 會自動呼叫這個函式
function windowResized() {
  resizeCanvas(windowWidth, windowHeight); // 注意：resizeCanvas 會把畫布清空
}
```

[回到全部常用指令](https://newmediaart.course.monolab.world/snippets)

[到 Hahow 報名](https://hahow.in/cr/creative-code)。價格與優惠以 Hahow 頁面為準。