選單
×
我的 W3Schools 獲得認證 空間 適用於教師 Plus 獲得認證 空間 適用於教師 Plus
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

HTML Canvas 示例

❮ 上一篇 下一篇 ❯

自己嘗試的示例

以下示例直接將 Canvas 嵌入到 HTML 程式碼中。

所有主流瀏覽器都支援 HTML Canvas。

Canvas 簡介

一個空的 canvas canvas 上的第一個繪圖

Examples explained

Canvas 座標

繪製一個矩形 繪製一條線 繪製一個圓形

Examples explained

Canvas 線條

繪製一條線 lineWidth - 設定線寬 strokeStyle - 設定線的顏色 lineCap - 設定線的端點樣式

Examples explained

Canvas 填充和描邊

fillStyle - 設定填充顏色 strokeStyle - 設定輪廓顏色 fillStyle 和 strokeStyle 組合使用 fillStyle 和 strokeStyle 帶有 alpha 通道（不透明度）

Examples explained

Canvas 形狀

建立直線形狀 建立一個三角形 使用 strokeStyle 為形狀著色

Examples explained

Canvas 矩形

rect() - 定義一個矩形 fillRect() - 繪製一個填充矩形 fillStyle - 矩形的填充顏色 strokeRect() - 繪製一個描邊（輪廓）矩形 strokeStyle - 設定輪廓顏色 使用 rect() 方法建立三個矩形 使用 strokeRect() 方法建立三個矩形

Examples explained

Canvas clearRect()

清除填充矩形中的矩形區域 清除填充矩形內部和外部的矩形區域 清除描邊矩形中的矩形區域

Examples explained

Canvas 圓形

繪製一個完整的圓形 繪製帶顏色的完整圓形 繪製半圓形 繪製從起始角度 0 到結束角度 0.5 * PI 的圓弧 繪製從起始角度 0 到結束角度 0.5 * PI 的逆時針圓弧

Examples explained

Canvas 曲線

quadraticCurveTo() - 繪製二次貝塞爾曲線 bezierCurveTo() - 繪製三次貝塞爾曲線

Examples explained

Canvas 線性漸變

建立帶有兩個顏色站點的線性漸變 用漸變填充描邊矩形 建立帶有三個顏色站點的線性漸變 建立垂直線性漸變（改變 y 軸引數值 (y2)） 建立對角線性漸變（同時改變 x 軸和 y 軸引數） 用漸變填充圓形 用漸變填充文字 用漸變填充描邊文字

Examples explained

Canvas 徑向漸變

建立帶有兩個顏色站點的徑向漸變 帶有較小結束圓的徑向漸變 移動結束圓的中心點 帶有三個顏色站點的徑向漸變

Examples explained

Canvas 文字

fillText() - 繪製填充文字 strokeText() - 繪製描邊文字 font - 為字型新增粗體和斜體

Examples explained

Canvas 文字顏色

fillStyle - 設定文字的填充顏色 strokeStyle - 設定文字的輪廓顏色 用漸變填充文字 用漸變填充描邊文字

Examples explained

Canvas 文字對齊

textBaseline - 設定文字的基線（垂直對齊） textAlign - 設定文字的水平對齊 文字垂直和水平居中

Examples explained

Canvas 陰影

shadowColor - 設定形狀的陰影顏色 shadowColor - 設定文字的陰影顏色 shadowBlur - 設定形狀陰影的模糊量 shadowBlur - 設定文字陰影的模糊量 shadowOffsetX - 設定陰影與形狀的水平距離 shadowOffsetY - 設定陰影與形狀的垂直距離

Examples explained

Canvas 影像

drawImage(image, dx, dy) - 在 canvas 上定點陣圖像 drawImage(image, dx, dy, dwidth, dheight) - 定點陣圖像，並指定影像在 canvas 上的寬度和高度 drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight) - 在將源影像放置到 canvas 上之前裁剪它

Examples explained

Canvas 變換

translate() - 按 x 和 y 移動物件/元素 translate() - 按 x 和 y 移動物件/元素 rotate() - 將矩形旋轉 20 度 rotate() - 將兩個矩形旋轉 20 度 scale() - 放大元素 scale() - 縮小元素 scale() - 將寬度縮放至 200%，高度縮放至 300% scale() - 用滑塊縮放 transform() - 將當前變換與引數描述的矩陣相乘 setTransform() - 將當前變換重置為單位矩陣，然後執行引數描述的變換

Examples explained

Canvas 裁剪

clip() - 建立圓形裁剪區域。然後繪製兩個矩形 clip() - 建立三角形裁剪區域。然後繪製兩個矩形 clip() - 建立圓形裁剪區域。然後繪製一個影像 clip() - 建立兩個矩形作為裁剪區域。使用 evenodd 規則 clip() - 建立兩個矩形作為裁剪區域。使用 nonzero 規則

Examples explained

Canvas 合成

globalCompositeOperation = "source-over" globalCompositeOperation = "source-out" globalCompositeOperation = "destination-over" globalCompositeOperation = "destination-atop" globalCompositeOperation = "lighter" globalCompositeOperation = "copy" globalCompositeOperation = "xor" globalCompositeOperation = "multiply" globalCompositeOperation = "screen" globalCompositeOperation = "darken" globalCompositeOperation = "lighten" globalCompositeOperation = "hue" globalCompositeOperation = "luminosity"

Examples explained


❮ 上一篇 下一篇 ❯
PLUS
空格
獲取證書
面向教師
面向企業
聯絡我們
×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業，請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤，或想提出建議，請傳送電子郵件給我們
help@w3schools.com

熱門教程
HTML 教程
CSS 教程
JavaScript 教程
操作方法教程
SQL 教程
Python 教程
W3.CSS 教程
Bootstrap 教程
PHP 教程
Java 教程
C++ 教程
jQuery 教程
熱門參考
HTML 參考
CSS 參考
JavaScript 參考
SQL 參考
Python 參考
W3.CSS 參考
Bootstrap 參考
PHP 參考
HTML 顏色
Java 參考
Angular 參考
jQuery 參考
熱門示例
HTML 示例
CSS 示例
JavaScript 示例
操作方法示例
SQL 示例
Python 示例
W3.CSS 示例
Bootstrap 示例
PHP 示例
Java 示例
XML 示例
jQuery 示例
獲取證書
 HTML 證書
CSS 證書
JavaScript 證書
前端證書
SQL 證書
Python 證書
PHP 證書
jQuery 證書
Java 證書
C++ 證書
C# 證書
XML 證書
論壇 關於 學院
W3Schools 經過最佳化，旨在方便學習和培訓。示例可能經過簡化，以提高閱讀和學習體驗。
教程、參考資料和示例會不斷審查，以避免錯誤，但我們無法保證所有內容的完全正確性。
使用 W3Schools 即表示您已閱讀並接受我們的使用條款、Cookie 和隱私政策。

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援。