資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究HTML DOM Canvas 物件
HTML DOM Canvas 物件與 HTML5 中引入的 <canvas> 元素相關聯。<canvas> 標籤用於藉助 JavaScript 繪製圖形。canvas 充當圖形的容器。在 canvas 上，我們可以繪製線條、形狀等。
屬性
以下是 Canvas 物件的屬性：
| 屬性 | 描述 |
|---|---|
| fillStyle | 設定或返回用於填充繪圖的顏色、漸變或圖案。 |
| strokeStyle | 設定或返回用於描邊的顏色、漸變或圖案。 |
| shadowColor | 設定或返回用於陰影的顏色。 |
| shadowBlur | 設定或返回陰影的模糊級別。 |
| shadowOffsetX | 設定或返回陰影相對於形狀的水平距離。 |
| shadowOffsetY | 設定或返回陰影相對於形狀的垂直距離。 |
方法
以下是 Canvas 物件的方法：
| 方法 | 描述 |
|---|---|
| createLinearGradient() | 建立線性漸變。 |
| createPattern() | 透過在指定方向上重複指定元素來建立圖案。 |
| shadowColor | 設定或返回用於陰影的顏色。 |
| createRadialGradient() | 建立圓形漸變。 |
| addColorStop() | 設定或返回陰影相對於形狀的水平距離。 |
語法
以下是以下內容的語法：
建立 canvas 物件
var x=document.createElement("CANVAS");示例
讓我們來看一個 HTML DOM canvas 物件的示例：
<!DOCTYPE html>
<html>
<head>
<style>
canvas {
border: 1px double blue;
margin:1em;
}
</style>
</head>
<body>
<h1>CANVAS</h1>
<button onclick="createCanvas()">CREATE</button>
<p>Click the above button to create a CANVAS element with a green circle in it</p>
<script>
function createCanvas() {
var x = document.createElement("CANVAS");
var ctx = x.getContext("2d");
ctx.fillStyle = "#C7EA46";
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
document.body.appendChild(x);
}
</script>
</body>
</html>輸出
這將產生以下輸出：
點選“建立”後：
在上面的示例中：
我們首先建立了一個名為“建立”的按鈕，當單擊它時，將執行 createCanvas() 方法。
<button onclick="createCanvas()">CREATE</button>
createCanvas() 方法建立一個 <canvas> 元素。然後，我們使用 getContext() 方法獲取新建立的 <canvas> 元素的上下文。每個 canvas 方法只能與一個上下文相關聯。getContext() 方法中的引數值“2d”指定它將用於繪製形狀、大小，即僅繪製二維內容。然後，我們使用 fillstyle 設定填充顏色，並使用 beginPath() 方法開始路徑。
之後，使用 arc() 方法定義圓的座標，並使用 fillstyle 顏色填充該圓。最後，我們使用 stroke() 方法在 canvas 上實際繪製，並使用 document.body 的 appendChild() 方法將 canvas 作為 body 元素的子元素附加。
function createCanvas() {
var x = document.createElement("CANVAS");
var ctx = x.getContext("2d");
ctx.fillStyle = "#C7EA46";
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
document.body.appendChild(x);
}
更新於： 2021年2月20日
279 次檢視
廣告