什么是canvas?有什么用？

更新時(shí)間:2021-09-20 來(lái)源:黑馬程序員瀏覽量:

IT培訓(xùn)班

canvas定義

canvas元素是HTML5的一部分，允許腳本語(yǔ)言動(dòng)態(tài)渲染位圖像。canvas由一個(gè)可繪制地區(qū)HTML代碼中的屬性定義決定高度和寬度。JavaScript代碼可以訪問(wèn)該地區(qū)，通過(guò)一套完整的繪圖功能類似于其他通用二維的API，從而生成動(dòng)態(tài)的圖形。

canvas用法

創(chuàng)建canvas標(biāo)簽，首先我們需要有一個(gè)畫(huà)布（Canvas）

<canvas id="canvas" width="150" height="150"></canvas>

渲染上下文

創(chuàng)建畫(huà)布之后，怎么使用了，需要在javascript中獲取到畫(huà)布并渲染上下文。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

代碼的第一行通過(guò)使用 document.getElementById() 方法來(lái)為 <canvas> 元素得到DOM 對(duì)象。一旦有了元素對(duì)象，你可以通過(guò)使用它的getContext()方法來(lái)訪問(wèn)繪畫(huà)上下文。

如何檢查支持性

創(chuàng)建canvas標(biāo)簽時(shí)可以在標(biāo)簽內(nèi)寫(xiě)上不支持的信息，如該瀏覽器不支持canvas。

<canvas id="canvas" width="150" height="150">該瀏覽器不支持 canvas</canvas>

同時(shí)也可以通過(guò)檢測(cè) getContext()方法是否存在來(lái)測(cè)試是否支持編程

var canvas = document.getElementById('tutorial');if (canvas.getContext){
	var ctx = canvas.getContext('2d');
		// drawing code here} else {
		// canvas-unsupported code here
	}
##來(lái)看一下最基本的模板
<html>
	<head>
		<title>Canvas tutorial</title>
		<style type="text/css">
			canvas { border: 1px solid black; }
		</style>
	</head>
	<body onload="draw();">
		<canvas id="tutorial" width="150" height="150"></canvas><script type="text/javascript">
			function draw(){
				var canvas = document.getElementById('tutorial');
				if (canvas.getContext){
					var ctx = canvas.getContext('2d');
				}

			}
	</body>
</html>

canvas能應(yīng)對(duì)以下需求：

1、游戲：游戲在 HTML5 領(lǐng)域具有舉足輕重的地位。HTML5 在基于 Web 的圖像顯示方面比Flash更加立體、更加精巧，Ohad認(rèn)為運(yùn)用canvas制作的圖像能夠令HTML5游戲在流暢度和跨平臺(tái)方面發(fā)揮更大的潛力。

2、圖表制作：現(xiàn)在一些開(kāi)發(fā)者使用HTML/CSS完成圖標(biāo)制作，但完全可以用canvas來(lái)實(shí)現(xiàn)。當(dāng)然，使用SVG（可縮放矢量圖形）來(lái)完成圖表制作也是非常好的方法。(例如：echarts.js heightchart.js都是基于canvas來(lái)繪圖!)

猜你喜歡：

CSS怎樣更換鼠標(biāo)樣式？

圓角矩形css怎么寫(xiě)？

清除input默認(rèn)樣式

CSS中px、em、rem有什么區(qū)別和不同？

上一篇：如何使一個(gè)盒子水平垂直居中？ 下一篇：css3屬性選擇器有哪些？css3屬性選擇器介紹