製作隨網頁容器大小改變的 canvas 區塊

2021-09-06 15:01:17

如果在網頁上有用到 canvas，又希望這個區塊可以隨著頁面大小做 RWD 變化的換，可以搭配使用 CSS 的 object-fit 屬性。

像我這邊就利用 bootstrap 的固定比例區塊再把 canvas 放進去，並希望 canvas 可以隨著區塊大小變化時跟著改變。

<div class="ratio ratio-4x3">
  <div class="canvas-wrap">
    <canvas class="cover-fit" id="canvas" width="100%" height="100%"></canvas>
  </div>
</div>

我設定了一個 cover-fit 的 CSS 樣式，並透過 object-fit 去設定如下：

.cover-fit{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

這樣 canvas 就可以隨區塊大小變化了。

使用 html2canvas 簡單且快速的將網頁轉為 canvas 後並透過 canvas2image 下載圖片透過 fabric.js 建置圖片編輯的 canvas

你可能也會喜歡的

tailwindcss 安裝教學

[CSS] CSS 原生變數(CSS Variables)使用技巧與說明

CSS3 Patterns Gallery- 純 CSS 繪製的背景圖

[CSS3] 使用 font-face 讓頁面可以顯示使用者電腦沒有安裝的字型

CSS3 Animation Cheat Sheet- 收錄許多 CSS 動畫效果的網站

CSS Snippets：簡單實用的CSS範例集合

課程推薦

AI工作術全面學習實戰營：6 堂精選課程，學會最好用 AI 工具，翻轉你的人生

《PChome雜誌》攜手 5 位在 AI 領域的專業講師，打造上述 6 堂實用課程，教你學會時下最好用的 AI 工具，導入生成式 AI 來產製工作內容，改造並升級你的工作流程。

輸入折扣碼 ZERO2024 還可以額外獲得 NT$400 優惠喔。

HTML與SEO實戰應用—並以ChatGPT助力提升網站品質與流量

本課程專為希望深入了解 HTML 並有效結合 SEO 策略的學員設計。我們將重點放在 HTML 的深度學習與應用上，同時穿插介紹如何透過搜索引擎優化提升網站能見度。透過即時互動式的直播教學，加上 ChatGPT 的輔助，您將學習到如何建立一個結構優良、美觀且符合 SEO 標準的網站。這不僅會提升網站的用戶體驗，還會大幅提高網站的搜索引擎排名，進而增加訪客流量和潛在客戶。