資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在HTML5中使用Canvas繪製圖形？
在HTML5中，我們可以使用canvas元素在網頁上繪製二維圖形。要繪製canvas圖形，我們使用<canvas>標籤，它建立互動式圖形和動畫，並將其渲染到Web瀏覽器中。這個Canvas元素只在HTML 5中可用，之前的版本中沒有。它可以生成遊戲中和資料領域中複雜的視覺化效果，幫助開發人員直觀地展示工作成果。在這篇文章中，我們將學習如何使用canvas元素透過各種示例來繪製基本的二維圖形設計。
語法
<canvas id="id_name">……write some text……</canvas>
此元素用於繪製幾何圖形。id選擇器目標是具有給定id屬性的單個元素。
var var_name = getElementById("id_name")
var是用於在javascript中定義變數的關鍵字。var_n 1ame是使用者設定的變數名。getElementById(“id_name”)匹配特定的id。
使用的屬性
示例中使用的屬性如下：
color − 定義文字的顏色。
width − 定義畫布圖形的寬度。
height − 定義畫布圖形的高度。
HTML Canvas參考
示例中使用了以下參考：
getContext() − 此方法設定二維圖形。
beginPath() − begin方法開始起始路徑並結束最後一條路徑。
rect() − 此方法繪製矩形。
stroke() − 此方法繪製畫布圖形的路徑。
strokeStyle() − 此方法填充畫布中幾何圖形的顏色邊框。
fillStyle() − 此方法填充幾何圖形的顏色。
fill() − 此方法填充畫布中當前繪製的幾何圖形。
lineTo() − 此方法新增新線並在現有點建立線。
moveTo() − 此方法移動畫布中的特定點。
closePath() − 此方法從最近的點建立路徑並返回到起點。
示例1
在下面的示例中，程式碼演示瞭如何使用HTML5 canvas和JavaScript繪製矩形。網頁標題為“Canvas形狀”，文字“使用Canvas繪製矩形”為紅色。程式碼生成一個ID為“rectangle”的canvas元素，寬度和高度均為200畫素。“rect()”方法在JavaScript中用於在畫布上繪製矩形，同時指示其位置、寬度和高度。最後，透過呼叫“stroke()”方法，以標準黑色繪製矩形。
<!DOCTYPE html>
<html>
<title>Rectangle using Canvas</title>
<head>
</head>
<body>
<center>
<h1 style="color:red;">Canvas Shapes</h1>
<h3>Rectangle</h3>
<canvas id="rectangle" width="200" height="200" />
<script>
var rg = document.getElementById("rectangle");
var rect = rg.getContext("2d");
rect.beginPath();
rect.rect(10, 10, 170, 100);
rect.stroke();
</script>
</center>
</body>
</html>
示例2
在下面的HTML和JavaScript示例中，以下程式碼建立一個canvas元素，並在其中繪製一個紅色的圓圈。圓圈的半徑為50畫素，中心位於(150, 150)。strokeStyle屬性用於以深藍色勾勒圓圈，fillStyle屬性則用紅色填充圓圈。要繪製圓圈，請使用arc()方法並指定中心點、半徑以及弧度的起始和結束角度。canvas標籤的id為“circle”，用於在JavaScript程式碼中訪問canvas元素。為了在網頁上水平居中canvas元素，程式碼包含在一個center標籤內。
<!DOCTYPE html>
<html>
<title>Cirle using Canvas</title>
<head>
</head>
<body>
<center>
<h1 style="color:red;">Canvas Shapes</h1>
<h2>Circle</h2>
<canvas id="circle" width="290" height="250" >
<script>
var cle = document.getElementById("circle");
var ctx = cle.getContext("2d");
ctx.beginPath();
ctx.arc(150, 150, 50, 0, 2*Math.PI );
ctx.strokeStyle = 'darkblue ';
ctx.fillStyle = "red";
ctx.fill();
ctx.stroke();
</script>
</center>
</body>
</html>
示例3
在下面的示例中，以下程式碼演示瞭如何使用JavaScript在HTML5 canvas上繪製三角形。網頁標題為“使用Canvas繪製三角形”，綠色標題文字為“Canvas形狀”。程式碼生成一個ID為“triangle”的canvas元素，尺寸為100畫素乘200畫素。三角形用JavaScript繪製，首先使用“moveTo()”方法設定筆的初始位置，然後使用“lineTo()”方法繪製連線三角形頂點的線。最後，使用“stroke()”方法繪製三角形輪廓。“closePath()”方法用於關閉三角形的路徑，從而完成形狀的繪製。
<!DOCTYPE html>
<html>
<title>Triangle using Canvas</title>
<head>
</head>
<body>
<center>
<h1 style="color:green;">Canvas Shapes</h1>
<h2>Triangle</h2>
<canvas id="triangle" width="100" height="200" >
<script>
var tr = document.getElementById("triangle");
var tri = tr.getContext("2d");
tri.beginPath()
tri.moveTo(0, 50);
tri.lineTo(50, 0);
tri.lineTo(100, 50);
tri.lineTo(0, 50);
tri.stroke();
tri.closePath();
</script>
</center>
</body>
</html>
結論
我們透過繪製不同的canvas圖形形狀來探索了這三個示例。然後我們看到了如何使用引用來設定canvas圖形的屬性。canvas元素使用CSS屬性進行樣式設定。上述幾何圖形是由Canvas繪製的，但也可以使用SVG元素繪製。
662 次瀏覽
