課程第 05-07 章 — 桌布生成
canvas 桌布合成:背景 + 文字疊加
桌布管線的核心決策:AI 只負責「背景」,中文字由前端 canvas 疊上去
—— 因為 AI 生圖畫中文必翻車。這個 demo 把 AI 背景換成可選的漸層背景,
專注練 canvas 合成本身;AI 生圖(非同步 job + 輪詢)在完整版 app 裡。
一、填 3×3 九宮格
中央是核心目標,周圍 8 格是子目標。可手填,或讀回你在 demo 01 / 完整版存的內容(同一把 localStorage 鑰匙 goal-grid-state-v1)。
二、選方向與背景,合成桌布
方向
背景漸層
改任何設定都會即時重繪 —— 文字合成是零成本的,這就是「背景與文字解耦」的好處。
三、這頁在教什麼
- 背景鋪滿:這裡用
createLinearGradient 畫漸層;完整版換成 AI 生成的背景圖,用 cover 縮放鋪滿(drawImage 取置中裁切區)。
- 全幅遮罩:疊一層
rgba(8,10,16,0.30) 半透明暗化 —— 不管背景多花,字都讀得到。
- 畫九宮格:圓角矩形格底 + 中央格主色強調 + 子目標格左色條;每格文字用「二分搜尋字級 + 中文逐字斷行」(
fitText)自動塞進格子,長短目標都不爆框。
- 匯出:
canvas.toBlob('image/png') 轉檔下載 —— 桌布從頭到尾沒離開過你的瀏覽器。
完整版 app 在這條管線前面多接一段:把目標關鍵詞組成生圖 prompt(明令 AI 不准畫任何文字、中央留低對比區給文字),
丟給生圖服務跑 70-180 秒的非同步 job,前端輪詢拿回背景圖 —— 那是第 05、07 章的主題;本頁是第 06 章的合成核心。