# 按 S 存 PNG（透明背景）

正式網址：https://newmediaart.course.monolab.world/snippets/save-png-transparent

draw() 裡用 clear() 取代 background()，存成 PNG 背景就是透明的，可以直接疊到海報、簡報或影片上。

- **分類**：存檔與輸出
- **行數**：33 行（p5.js 1.x／2.x）

把自己 draw() 第一行的 background() 換成 clear()，再貼上 keyPressed、pad、timestamp。只是要存 PNG、不需要透明的話，background() 留著、把 jpg 改成 png 就好。

```js
// 按 S 存 PNG：背景是透明的，可以直接疊到海報、簡報、影片上
// 畫面上看到的底色是網頁的顏色，存出來的檔案才是透明
function setup() {
  createCanvas(600, 600);
}

function draw() {
  clear(); // 用 clear() 取代 background()：每一格擦成透明，而不是塗滿顏色
  noFill();
  stroke(255, 120, 80);
  strokeWeight(10);
  for (let i = 0; i < 6; i++) {
    circle(width / 2, height / 2, 80 + i * 80);
  }
}

function keyPressed() {
  if (key === 's' || key === 'S') {
    // 只有 PNG 留得住透明；存成 JPG 的話，透明的地方會變成黑色
    saveCanvas('sketch-' + timestamp(), 'png');
  }
}

// 補零：7 → "07"。檔名長度一致，資料夾裡才會照時間排好
function pad(n) {
  return String(n).padStart(2, '0');
}

// 現在的日期時間：2026-09-29-1905-12（年-月-日-時分-秒）
function timestamp() {
  return year() + '-' + pad(month()) + '-' + pad(day()) + '-' +
    pad(hour()) + pad(minute()) + '-' + pad(second());
}
```

## 同類常用指令・存檔與輸出

- [按 S 存 JPG（檔名帶日期時間）](https://newmediaart.course.monolab.world/snippets/save-jpg-datetime)
- [存高解析度圖（pixelDensity）](https://newmediaart.course.monolab.world/snippets/save-hires)
- [按 G 存 3 秒 GIF（saveGif）](https://newmediaart.course.monolab.world/snippets/save-gif)
- [按 V 錄 5 秒影片（WebM）](https://newmediaart.course.monolab.world/snippets/record-webm)

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

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