Home » 网页开发教学 » JavaScript教学 » HTML5 Canvas 入门教程: 第一册

HTML5 Canvas 入门教程: 第一册

HTML5 Canvas 入门教程: 第一册

<canvas>是HTML5里其中一个强大的元素,它能够使用JavaScript来制作图像,动画,游戏,图表,或其它图形类的画像等等。这个教程将描述如何在你的HTML页面中使用<canvas>元素。 这些例子为你提供了一些清晰的思路关于你可以用<canvas>来做什么以及如何开始你自己的实践。这项教程是非常适合所有的初学者,因为它简单,易懂,一学就会。

本教程包含

支持HTML5<canvas>的浏览器

在我们开始之前,先来看看有哪几个浏览器是支持HTML5<canvas>元素:

  • Internet Explorer (9.0+)
  • Safari (3.0+)
  • Firefox (3.0+)
  • Chrome (3.0+)
  • Opera (10.0+)
  • iOS (1.0+)
  • Android (1.0+)

入门

<canvas id="myCanvas" width="300" height="300">

<canvas>元素看起来和其它的HTML元素没什么两样。<canvas>元素只有两个属性width和height。必须注意的是,每一次使用的时候都必须设置<canvas>的width和height,那就可以避免在绘制时图像会出现扭曲。

所以在HTML文档里,你的<canvas>元素将会是如下所示:

<!DOCTYPE html>
<html>
	<head>
	        <title>HTML5 Canvas 入门教程 | onlyWebPro.com</title>
	</head>

	<body>
		<canvas id="myCanvas" width="300" height="300">
		<!-- 为用户提供替换内容 -->
                对不起,您的浏览器不支持Canvas
		</canvas>
	</body>
</html>

检查浏览器对<canvas>的支持性,如果浏览器不支持<canvas>就为用户提供替换内容或讯息。

明白<canvas>的画布坐标(Coordinate System)

在我们开始画图之前,我们需要了解一下<canvas>的画布坐标(Coordinate System)。如果你在这之前有使用过任何其他2D图形编程语言,那么你应该熟悉标准的笛卡尔(Cartesian)的左上角坐标系统的(0,0),那就是任何图形坐标都是从左上角开始数。例如,如果你想移动一个矩形到右边,那么你就需要增加X轴值; 反之,如果你想把矩形往下移动,那么你就必须增加Y轴值。

画布坐标(Coordinate System)

绘制简单的图形

我们需要依赖JavaScript来帮助我们在<canvas>画布上绘制图像。<canvas>元素有一个叫做 getContext() 的方法,这个方法是用来获得渲染上下文(rendering context)和它的绘画功能。getContext()只有一个参数,那就是上下文的格式(2D, 或3D)。在本教程里,我们只会专注探讨2D的渲染上下文格式。

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

OK, 我们现在就来开始在空白的<canvas>画布上绘制图形:

<!DOCTYPE html>
<html>
	<head>
	    <title>HTML5 Canvas 入门教程 | onlyWebPro.com</title>
	    <script type="text/javascript">
			function drawShape() {
				var myCanvas = document.getElementById("myCanvas");
				var ctx = myCanvas.getContext("2d");
				ctx.fillRect(20, 20, 100, 100);
			}
		</script>
	</head>

	<body onload="drawShape()">
		<canvas id="myCanvas" width="300" height="300">
	        <!-- 为用户提供替换内容 -->
                对不起,您的浏览器不支持Canvas
		</canvas>
	</body>
</html>

保存你的文档,然后使用支持<canvas>的浏览器浏览这个文档,你会看到一个黑色的矩形,如下所示:

HTML5 Canvas For Absolute Beginners – Part 1

上面的脚本中包含一个叫做draw()的函数。当页面加载结束的时候就会执行这个函数,而这个函数里就有一项由<canvas>提供执行绘制矩形的函数 -fillRect。fillRect函数包含了四种参数,分别是左上角(x, y,宽度以及高度。如下所示:

ctx.fillRect(x, y, width, height);

很简单对不对?:D 来点更好玩的,让我们继续来改制我们刚创建的矩形。

更多绘制矩形的方法

除了fillRect函数以外,<canvas>也提供了另外两种绘制矩形的方法:分别是strokeRectclearRect

strokeRect‘函数让我们绘制一个矩形的边框。试看在你的文档里加入strokeRect函数,如下所示:

ctx.strokeRect(10,10,120,120)

保存你的文档,然后使用支持<canvas>的浏览器浏览这个文档,你应该会看到如图下所示的那样:

HTML5 Canvas For Absolute Beginners – Part 1

我们为刚创建的矩形加上了边框耶!

那么下一步呢就是使用刚才提到的’clearRect‘。’clearRect‘函数是用来清除指定矩形区域,让清除部分完全透明。试看在你的文档里加入clearRect函数,如下所示:

ctx.clearRect(45,45,50,50);

再次保存你的文档,然后使用支持<canvas>的浏览器浏览这个文档,你应该会看到矩形中间的部分变成白色了,如图下所示的那样:

HTML5 Canvas For Absolute Beginners – Part 1

注:’ strokeRect‘与’ clearRect‘函数具有和’fillRect‘函数一样的参数,那就是(x, y, 宽度, 高度)

总结

<!DOCTYPE html>
<html>
	<head>
		<title>HTML5 Canvas 入门教程 | onlyWebPro.com</title>
		<script type="text/javascript">
			function drawShape() {
				var myCanvas = document.getElementById("myCanvas");
				var ctx = myCanvas.getContext("2d");
				ctx.fillRect(20, 20, 100, 100);
				ctx.strokeRect(10,10,120,120);
				ctx.clearRect(45,45,50,50);
			}
		</script>
	</head>

	<body onload="drawShape()">
		<canvas id="myCanvas" width="300" height="300">
		<!-- 为用户提供替换内容 -->
                对不起,您的浏览器不支持Canvas
		</canvas>
	</body>
</html>

我们将在接下来的教程里介绍更多canvas元素的其他功能。敬请留意!
关注onlyWebPro.com的官方微博,以获取更多的HTML5免费教程!
马上关注onlyWebPro.com官方微博!


Android, iOS Development Tutorials