[ 登录注册 ]

HTML5

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

2016/08/17 14:09 [db:作者] 返回上一页

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

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

  HTML5中的Canvas图形元素

  在这篇文章中笔者将对HTML5中新的新的<canvas>元素做一个简单的描述。<canvas>可以让我们能够在浏览器上使用脚本绘制图形。笔者将会通过使用<canvas>元素教大家如何在浏览器上绘制一个简单的三角形。元素做一个简单的描述元素教大家如何在浏览器上绘制一个简单的三角形。

  在我们开始之前,你必须知道目前HTML5和其他相关的技术只能被目前最新版本的浏览器所兼容。你需要使用最新版本的火狐,Chrome,Safari 浏览器或者ie9.

  什么是Canvas元素?

  在HTML5中是一个新的标签元素。我们可以把它形容是一个容器。下面是一个包含元素的HTML5页面代码。

<!DOCTYPE HTML>

<html>

<head>

<title>HTML5 – Hello Triangle</title>

</head>

<body>

<canvas id=”canvas” width=”800″ height=”600″>

</canvas>

</body>

</html>

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

  画布的设置

  在画布上构建图像我们需要先使用标签定义出一个具体宽度和高度的方框。在我们本文的例子中,我们定义的是一个宽度为800px,高度为600px的矩形框。

  画布上我们需要使用坐标系统。在画布的左上角我们定义为坐标(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/ 原创,转载请保留链接,谢谢!

点击复制链接 与好友分享!回本站首页

文章来源:http://www.bozhiyue.com/html5/2016/0817/377664.html
评论
发表评论