首页技术文章正文

什么是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>

canvas能应对以下需求: 

1、游戏:游戏在 HTML5 领域具有举足轻重的地位。HTML5 在基于 Web 的图像显示方面比Flash更加立体、更加精巧,Ohad认为运用canvas制作的图像能够令HTML5游戏在 流畅度和跨平台方面发挥更大的潜力。


2、图表制作:现在一些开发者使用HTML/CSS完成图标制作,但完全可以用canvas来实现。当然,使用SVG(可缩放矢量图形)来完成图表制作也是非常好的方法。(例如:echarts.js heightchart.js都是基于canvas来绘图!) 



猜你喜欢:

CSS怎样更换鼠标样式?

圆角矩形css怎么写?

清除input默认样式

CSS中px、em、rem有什么区别和不同?

在线咨询 我要报名
和我们在线交谈!