HTML标签canvas

<canvas> 是一个可以使用脚本(通常为JavaScript)在其中绘制图形的 HTML 元素.它可以用于制作照片集或者制作简单(也可以是不简单)的动画. 右边的图片展示了一些<canvas> 的应用,在这个教程后面我们将看到.

<canvas> 最早被Apple引入,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现. 基于Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素. <canvas> 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中.

这个教程将描述如何在你的HTML页面中使用<canvas>元素. 这些例子为你提供了一些清晰的思路关于你可以用<canvas>来做什么以及如何开始你自己的实践.

开始之前

使用 <canvas> 元素不是非常难但你需要一些基本的HTML和JavaScript知识.

 <canvas> 元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Explorer 9.

所以：在中间加提示信息

<canvas id="canvas">不支持该标签</canvas>

	<canvas id="myCanvas" width="300px" height="300px" style="border:1px solid #c3c3c3;">不支持canvas标签</canvas>
	<script>
		var canvas=document.getElementById('myCanvas');
		if(canvas.getContext){
			var d2=canvas.getContext('2d');
			d2.fillStyle='#ff0';
			d2.fillRect(0,0,100,100);

			d2.moveTo(100,100);
			d2.lineTo(250,50);
			d2.lineTo(100,50);
			d2.stroke();
		}
	</script>