时间：2023-03-03 16:51:01 | 来源：建站知识
时间：2023-03-03 16:51:01 来源：建站知识
如何使用HTML5的Canvas图形元素绘制图形：HTML5是目前HTML的最新标准。在笔者写这篇文章时，HTML5仍在积极的发展。HTML5除了提供新的标签信息外，同时还包含了新的应用程序编程接口(API)，这样可以使我们能够在网页上提供更多丰富的多媒体和互动功能，而无需使用专有的插件。除了这些万维网联盟还公布了其他的相关技术，比如地理位置定位，脱机存储，档案管理等等。
在HTML5推出后，浏览器将会更像是一个操作系统，事实上谷歌的Chrome OS就是基于Chrome浏览器上运行各种网络应用程序的操作系统。使用HTML5和其他相关技术，我们就可以构建应用程序，模糊传统的桌面与WEB之间的分界线。
HTML5中的Canvas图形元素
在这篇文章中笔者将对HTML5中新的新的canvas元素做一个简单的描述。canvas可以让我们能够在浏览器上使用脚本绘制图形。笔者将会通过使用canvas元素教大家如何在浏览器上绘制一个简单的三角形。在我们开始之前，你必须知道目前HTML5和其他相关的技术只能被目前最新版本的浏览器所兼容。你需要使用最新版本的火狐，Chrome，Safari 浏览器或者ie9。
什么是Canvas
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);
}
下一步我们需要在标签上做“onload”事件。
<body onLoad=”drawOnCanvas();”>
最后我们保存为HTML文件，然后就可以在浏览器中查看到以下的结果。
总结：
本文是对HTML5的canvas元素的一个很简短的简介。HTML5中还有许多元素我们没有继续探索与了解。我们需要不断的学习与了解，希望本文对于大家了解HTML5有所帮助。本文由九牧王官方旗舰店 原创，转载请保留链接，谢谢!
关键词：图形,绘制,使用
在线咨询
