App下載

html5如何創(chuàng)建Canvas畫布？步驟分享！

猿友 2021-06-09 14:36:17 瀏覽數(shù) (3692)
反饋

今天我門學(xué)習(xí)的是有關(guān)于在“html5如何創(chuàng)建Canvas畫布？”的問題。我們來先了解一下HTML5中的 ?canvas?標(biāo)簽怎么創(chuàng)建畫布，我們通過JavaScript來進(jìn)行繪制圖形之后，在頁面中放置一個?canvas?元素，這樣子的做法就相當(dāng)是在頁面中放置了一塊畫布，而且?canvas?元素中擁有多種繪制圖形的方法。

1.首先，?canvas?是一個雙標(biāo)簽，所以我們可以用標(biāo)簽中的?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>

運(yùn)行結(jié)果截圖如下：

畫布canvas

這樣我們就完成了一個畫布的創(chuàng)建。（補(bǔ)充：在沒有給?canvas?屬性設(shè)置寬高的時候會默認(rèn)為?300px?，當(dāng)然除了在?canvas?屬性中設(shè)置，我們也可以在 css 屬性中進(jìn)行一個設(shè)置，但是呢如果寬高屬性和初始的比例不一樣會出現(xiàn)，扭曲的現(xiàn)象。所以建議一般不使用 css進(jìn)行設(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" 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)行效果如下圖：

演示畫布

我們看到在這個畫布中我們加入了一個藍(lán)色的矩形。

總結(jié)：

當(dāng)然這只是一個簡單的方法，如果你要設(shè)置更復(fù)雜的一個圖形的話我們可以在HTML5 DOM CANCAS 對象進(jìn)行學(xué)習(xí)和了解。以上就是今天的內(nèi)容，希望對你有所幫助。


HTML CSS JavaScript 前端 框架 編程基礎(chǔ)

0 人點(diǎn)贊