今天我門學(xué)習(xí)的是有關(guān)于在“html5如何創(chuàng)建Canvas畫布？”的問題。我們來先了解一下HTML5中的 ?canvas?標(biāo)簽怎么創(chuàng)建畫布，我們通過JavaScript來進(jìn)行繪制圖形之后，在頁面中放置一個(gè)?canvas?元素，這樣子的做法就相當(dāng)是在頁面中放置了一塊畫布，而且?canvas?元素中擁有多種繪制圖形的方法。
1.首先，?canvas?是一個(gè)雙標(biāo)簽，所以我們可以用標(biāo)簽中的?width?和?height?屬性來定義畫布的大小這樣我們就可以創(chuàng)建一個(gè)隱藏畫布了，我們可以通過?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>
運(yùn)行結(jié)果截圖如下：
這樣我們就完成了一個(gè)畫布的創(chuàng)建。（補(bǔ)充：在沒有給?canvas?屬性設(shè)置寬高的時(shí)候會(huì)默認(rèn)為?300px?，當(dāng)然除了在?canvas?屬性中設(shè)置，我們也可以在 css 屬性中進(jìn)行一個(gè)設(shè)置，但是呢如果寬高屬性和初始的比例不一樣會(huì)出現(xiàn)，扭曲的現(xiàn)象。所以建議一般不使用 css進(jìn)行設(shè)置屬性?。?/p>
2.由于在?canvas?這個(gè)屬性中本身沒有繪制圖像的能力，所以要通過 JavaScript 來實(shí)現(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>運(yùn)行效果如下圖：
我們看到在這個(gè)畫布中我們加入了一個(gè)藍(lán)色的矩形。
總結(jié)：
當(dāng)然這只是一個(gè)簡(jiǎn)單的方法，如果你要設(shè)置更復(fù)雜的一個(gè)圖形的話我們可以在HTML5 DOM CANCAS 對(duì)象進(jìn)行學(xué)習(xí)和了解。以上就是今天的內(nèi)容，希望對(duì)你有所幫助。
