HTML5的Canvas元素可以透過Canvas建構函式建立嗎？
- PHPz轉載
- 2023-09-06 11:41:071263瀏覽
在本文中，我們將執行如何從 canvas 建構函式建立 HTML5 canvas 元素。我們可以透過使用 HTML 中的
在深入範例之前，讓我們先了解 HTML 中
Canvas Api 可用於透過 javascript 和 html
Canvas API 的大部分注意力都集中在 2D 視覺效果上。 WebGL API 渲染硬體加速的 2D 和 3D 視覺效果，並使用
讓我們看看以下範例，以便更好地了解畫佈建構子
使用 getElementId() 方法
具有給定值的元素由 getElementById() 函數傳回。如果該元素不存在，則 getElementById() 函數傳回 null。 HTML DOM 中最常用的方法之一是 getElementById()。
範例
在下面的範例中，我們使用 getElementId() 來存取
<!DOCTYPE html>
<html>
<body>
<canvas id="tutorial1" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<p>Click To Apply Canvas</p>
<button onclick="mytutorial()">CLICK</button>
<script>
function mytutorial() {
var c = document.getElementById("tutorial1");
var ctx = c.getContext("2d");
ctx.fillStyle = "#D6EAF8";
ctx.fillRect(20, 20, 150, 100);
}
</script>
</body>
</html>
執行腳本時，它會存取
如果使用者點擊該按鈕，畫布就會套用到網頁。
使用createElement()方法
HTML DOM createElement() 方法用於使用 JavaScript 動態建立 HTML 元素。它建構以元素名稱作為參數指定的元素節點。
範例
考慮以下範例，我們使用 createElement() 來建立
<!DOCTYPE html>
<html>
<style> canvas { border: 1px solid black; } </style>
<body>
<button onclick="mytutorial()">CLICK</button>
<p>Click To Create Canvas</p>
<script>
function mytutorial() {
var x = document.createElement("CANVAS");
var ctx = x.getContext("2d");
ctx.fillStyle = "#ABEBC6";
ctx.fillRect(20, 20, 150, 100);
document.body.appendChild(x);
}
</script>
</body>
</html>
在執行上述腳本時，它將產生包含提示「點擊以建立畫布」和「點擊」按鈕的輸出。
當使用者點擊該按鈕時，createElement() 方法將獲得存取權限並在網頁上建立畫布。
以上是HTML5的Canvas元素可以透過Canvas建構函式建立嗎？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除