溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“html5怎么創(chuàng)建Canvas畫布”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“html5怎么創(chuàng)建Canvas畫布”文章能幫助大家解決問題。
我們來先了解一下HTML5中的 canvas標簽怎么創(chuàng)建畫布，我們通過JavaScript來進行繪制圖形之后，在頁面中放置一個canvas元素，這樣子的做法就相當是在頁面中放置了一塊畫布，而且canvas元素中擁有多種繪制圖形的方法。
1.首先，canvas是一個雙標簽，所以我們可以用標簽中的width和height屬性來定義畫布的大小這樣我們就可以創(chuàng)建一個隱藏畫布了，我們可以通過style屬性來讓他顯示出來。代碼如下：
<html>
<head>
<meta charset="utf-8">
<title>canvas畫布分享</title>
</head>
<body>
<canvas width="200px" height="200px" ></canvas>
</body>
</html>這樣我們就完成了一個畫布的創(chuàng)建。（補充：在沒有給canvas屬性設(shè)置寬高的時候會默認為300px，當然除了在canvas屬性中設(shè)置，我們也可以在 css 屬性中進行一個設(shè)置，但是呢如果寬高屬性和初始的比例不一樣會出現(xiàn)，扭曲的現(xiàn)象。所以建議一般不使用 css進行設(shè)置屬性?。?/p>
2.由于在canvas這個屬性中本身沒有繪制圖像的能力，所以要通過 JavaScript 來實現(xiàn)。那么我們就來試試吧！代碼如下：
<html>
<head>
<meta charset="utf-8">
<title>canvas畫布分享</title>
</head>
<body>
<canvas id="mycanvas" width="200px" height="200px" ></canvas>
<script>
var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.fillStyle = "#99CCFF";
ctx.fillRect(50, 50, 100, 100);
</script>
</body>
</html>關(guān)于“html5怎么創(chuàng)建Canvas畫布”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼