如何使用HTML5的Canvas图形元素绘制图形


　　HTML5是目前HTML的最新标准。在笔者写这篇文章时，HTML5仍在积极的发展。HTML5除了提供新的标签信息外，同时还包含了新的应用程序编程接口(API)，这样可以使我们能够在网页上提供更多丰富的多媒体和互动功能，而无需使用专有的插件。除了这些万维网联盟还公布了其他的相关技术，比如地理位置定位，脱机存储，档案管理等等。
　　在HTML5推出后，浏览器将会更像是一个操作系统，事实上谷歌的Chrome OS就是基于Chrome浏览器上运行各种网络应用程序的操作系统。使用HTML5和其他相关技术，我们就可以构建应用程序，模糊传统的桌面与WEB之间的分界线。
　　HTML5中的Canvas图形元素
　　在这篇文章中笔者将对HTML5中新的新的<canvas>元素做一个简单的描述。<canvas>可以让我们能够在浏览器上使用脚本绘制图形。笔者将会通过使用<canvas>元素教大家如何在浏览器上绘制一个简单的三角形。
　　在我们开始之前，你必须知道目前HTML5和其他相关的技术只能被目前最新版本的浏览器所兼容。你需要使用最新版本的火狐，Chrome，Safari 浏览器或者ie9.
　　什么是Canvas元素?
　　在HTML5中

	<!DOCTYPE HTML>
	<html>
	<head>
	<title>HTML5 – Hello Triangle</title>
	</head>
	<body>
	<canvas id=”canvas” width=”800″ height=”600″>
	</canvas>
	</body>
	</html>

　　这一段短短的HTML5代码还没有做什么事情。接着我们将在画布上绘制和操纵元素。
　　画布的设置
　　在画布上构建图像我们需要先使用

　　画布上我们需要使用坐标系统。在画布的左上角我们定义为坐标(0，0)，X坐标随着画布的宽度不断增加，Y轴随着画布的高度不断增加。基于我们本文的例子，X轴所从(0，0)到(800，0)的线，Y轴是从(0，0)到(0，600)的线。具体如下图所示。
　　

	
 
　　为了能够进入画布绘图，我们需要先完成他的背景。具体我们可以使用下面的Javascript代码。
　　var myCanvas = document.getElementById(“canvas”);
　　var ctx = myCanvas.getContext(“2d”);
　　现在ctx就持有canvas元素的2D背景，可以在二维空间中作图。我们将在上面绘制三角形。当然你会想我们可以不可以使用3D背景呢?答案是目前还不行，因为目前还没有一个统一标准的3D背景，同时浏览器的支持也很有限。
　　画第一条直线
　　在我们画第一条直线的时候我们需要知道什么?首先我们需要知道两个点，其实坐标(X1，Y1)和结束坐标(X2，Y2)。画线我们可以使用以下的代码。
　　function drawLine(ctx, color, x1, y1, x2, y2){
　　ctx.beginPath();
　　ctx.strokeStyle=color;
　　ctx.moveTo(x1, y1);
　　ctx.lineTo(x2, y2);
　　ctx.stroke();
　　ctx.closePath();
　　}
　　这些代码是在2D的背景下。并使用制定的颜色画线。使用MOVETO()做为起点，lineTo()为终点绘制图线。我们可以使用这些代码绘制三角形的边缘线。
　　绘制三角形
　　既然我们有画线的代码，那么绘制三角形就很容易了。这里有绘制三条线的方法。
　　function drawTriangle(ctx, color, x1, y1, x2, y2, x3, y3){
　　drawLine(ctx, color, x1, y1, x2, y2);
　　drawLine(ctx, color, x2, y2, x3, y3);
　　drawLine(ctx, color, x3, y3, x1, y1);
　　}
　　接着我们就需要将这些线放置在一起，代码如下：
　　function drawOnCanvas(){
　　var myCanvas = document.getElementById(“canvas”);
　　var ctx = myCanvas.getContext(“2d”);
　　drawTriangle(ctx, “#FF0000″, 10, 10, 10, 100, 100, 100);
　　}
　　下一步我们需要在<body>标签上做“onload”事件。
<body onLoad=”drawOnCanvas();”>
　　最后我们保存为HTML文件，然后就可以在浏览器中查看到以下的结果。
　　

	
 
　　总结：
　　本文是对HTML5的canvas元素的一个很简短的简介。HTML5中还有许多元素我们没有继续探索与了解。我们需要不断的学习与了解，希望本文对于大家了解HTML5有所帮助。本文由九牧王官方旗舰店 http://www.jiumw.com/ 原创，转载请保留链接，谢谢!