如何使用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/ 原创，转载请保留链接，谢谢!
上一篇： RichFaces 3.2发布了