今天我門學習的是有關于在“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" style="border: 2px solid #000;"></canvas>
</body>
</html>
運行結果截圖如下：
這樣我們就完成了一個畫布的創(chuàng)建。（補充：在沒有給?canvas?屬性設置寬高的時候會默認為?300px?，當然除了在?canvas?屬性中設置，我們也可以在 css 屬性中進行一個設置，但是呢如果寬高屬性和初始的比例不一樣會出現(xiàn)，扭曲的現(xiàn)象。所以建議一般不使用 css進行設置屬性?。?/p>
2.由于在?canvas?這個屬性中本身沒有繪制圖像的能力，所以要通過 JavaScript 來實現(xiàn)。那么我們就來試試吧！代碼如下：
<html>
<head>
<meta charset="utf-8">
<title>canvas畫布分享</title>
</head>
<body>
<canvas id="mycanvas" width="200px" height="200px" style="border: 2px solid #000;"></canvas>
<script>
var can = document.getElementById("mycanvas");
var ctx = can.getContext("2d");
ctx.fillStyle = "#99CCFF";
ctx.fillRect(50, 50, 100, 100);
</script>
</body>
</html>運行效果如下圖：
我們看到在這個畫布中我們加入了一個藍色的矩形。
總結：
當然這只是一個簡單的方法，如果你要設置更復雜的一個圖形的話我們可以在HTML5 DOM CANCAS 對象進行學習和了解。以上就是今天的內容，希望對你有所幫助。
