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

HTML5是目前HTML的最新标准。在笔者写这篇文章时&＃xff0c;HTML5仍在积极的发展。HTML5除了提供新的标签信息外&＃xff0c;同时还包含了新的应用程序编程接口(API)&＃xff0c;这样可以使我们能够在网页上提供更多丰富的多媒体和互动功能&＃xff0c;而无需使用专有的插件。除了这些万维网联盟还公布了其他的相关技术&＃xff0c;比如地理位置定位&＃xff0c;脱机存储&＃xff0c;档案管理等等。

在HTML5推出后&＃xff0c;浏览器将会更像是一个操作系统&＃xff0c;事实上谷歌的Chrome OS就是基于Chrome浏览器上运行各种网络应用程序的操作系统。使用HTML5和其他相关技术&＃xff0c;我们就可以构建应用程序&＃xff0c;模糊传统的桌面与WEB之间的分界线。

HTML5中的Canvas图形元素

在这篇文章中笔者将对HTML5中新的新的canvas元素做一个简单的描述。canvas可以让我们能够在浏览器上使用脚本绘制图形。笔者将会通过使用canvas元素教大家如何在浏览器上绘制一个简单的三角形。在我们开始之前&＃xff0c;你必须知道目前HTML5和其他相关的技术只能被目前最新版本的浏览器所兼容。你需要使用最新版本的火狐&＃xff0c;Chrome&＃xff0c;Safari 浏览器或者ie9。

什么是Canvas

canvas是html5的一个新的标签&＃xff0c;在页面中定义该标签的代码如下

这一段短短的HTML5代码还没有做什么事情。接着我们将在画布上绘制和操纵元素。

画布的设置

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

为了能够进入画布绘图&＃xff0c;我们需要先完成他的背景。具体我们可以使用下面的Javascript代码。

var myCanvas &＃61; document.getElementById(“canvas”);

var ctx &＃61; myCanvas.getContext(“2d”);

现在ctx就持有canvas元素的2D背景&＃xff0c;可以在二维空间中作图。我们将在上面绘制三角形。当然你会想我们可以不可以使用3D背景呢?答案是目前还不行&＃xff0c;因为目前还没有一个统一标准的3D背景&＃xff0c;同时浏览器的支持也很有限。

画第一条直线

在我们画第一条直线的时候我们需要知道什么?首先我们需要知道两个点&＃xff0c;其实坐标(X1&＃xff0c;Y1)和结束坐标(X2&＃xff0c;Y2)。画线我们可以使用以下的代码。

function drawLine(ctx, color, x1, y1, x2, y2){

ctx.beginPath();

ctx.strokeStyle&＃61;color;

ctx.moveTo(x1, y1);

ctx.lineTo(x2, y2);

ctx.stroke();

ctx.closePath();

}

这些代码是在2D的背景下。并使用制定的颜色画线。使用MOVETO()做为起点&＃xff0c;lineTo()为终点绘制图线。我们可以使用这些代码绘制三角形的边缘线。

绘制三角形

既然我们有画线的代码&＃xff0c;那么绘制三角形就很容易了。这里有绘制三条线的方法。

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);

}

接着我们就需要将这些线放置在一起&＃xff0c;代码如下&＃xff1a;

function drawOnCanvas(){

var myCanvas &＃61; document.getElementById(“canvas”);

var ctx &＃61; myCanvas.getContext(“2d”);

drawTriangle(ctx, “#FF0000″, 10, 10, 10, 100, 100, 100);

}

下一步我们需要在标签上做“onload”事件。

最后我们保存为HTML文件&＃xff0c;然后就可以在浏览器中查看到以下的结果。

总结&＃xff1a;

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

申请创业报道&＃xff0c;分享创业好点子。点击此处&＃xff0c;共同探讨创业新机遇&＃xff01;