什么是canvas?有什么用？

更新时间:2021-09-20 来源:黑马程序员浏览量:

IT培训班

canvas定义

canvas元素是HTML5的一部分，允许脚本语言动态渲染位图像。canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度。JavaScript代码可以访问该地区，通过一套完整的绘图功能类似于其他通用二维的API，从而生成动态的图形。

canvas用法

创建canvas标签，首先我们需要有一个画布（Canvas）

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

渲染上下文

创建画布之后，怎么使用了，需要在javascript中获取到画布并渲染上下文。

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

代码的第一行通过使用 document.getElementById() 方法来为 <canvas> 元素得到DOM 对象。一旦有了元素对象，你可以通过使用它的getContext()方法来访问绘画上下文。

如何检查支持性

创建canvas标签时可以在标签内写上不支持的信息，如该浏览器不支持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>