什么是canvas?有什么用？

更新時間:2021-09-20 來源:黑馬程序員瀏覽量:

IT培訓班

canvas定義

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

canvas用法

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

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

渲染上下文

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

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

代碼的第一行通過使用 document.getElementById() 方法來為 <canvas> 元素得到DOM 對象。一旦有了元素對象，你可以通過使用它的getContext()方法來訪問繪畫上下文。

如何檢查支持性

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

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

同時也可以通過檢測 getContext()方法是否存在來測試是否支持編程

var canvas = document.getElementById('tutorial');if (canvas.getContext){
	var ctx = canvas.getContext('2d');
		// drawing code here} else {
		// canvas-unsupported code here
	}
##來看一下最基本的模板
<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>