HTML5开发之绘制图形canvas

canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形。在页面上放置一个canvas元素就相当于在页面上放置了一块画布，可以在其中进行图形的描绘。

 

在canvas元素里进行绘画，并不是指拿鼠标来作画。在网页上使用canvas元素时，它会创建一块矩形区域。默认情况下该矩形区域宽为300像素，高为150像素，用户可以自定义具体的大小或者设置canvas元素的其他特性。在页面中加入了canvas元素后，便可以通过JavaScfipt来自由地控制它。可以在其中添加图片、线条以及文字，也可以在里面绘图，甚至还可以加入高级动画。

 

其语法格式为：,<canvas></canvas>

 

在HTML中放人canvas元素非常简单和直观，代码如下：

 

<canvas id=”canvas”width=”400”height=”300”／>

 

以上代码会在页面上显示一块400像素×300像素的“隐藏”区块。要为其增加一个边框才可以看见它，代码如下：

 

<canvas id="xyfg"width="400"height="300" style=" border:

1px solid" ></canvas>

 

其中增加的“id=‘xy坛”’属性是为了在开发过程中通过该id迅速找到该canvas元素并在其上画图。

 

下面在创建的画布上绘制一条斜线，实现步骤如下：

 

首先，通过canvas的id值来获取对canvas对象的访问权。这里引用的id为xy培，接着定义一个context变量，调用canvas对象的getcontext方法，同时传人使用的canvas类型。因为是画二维的直线，所以传人“2d”来获取一个二维上下文，这也是到目前为止唯一可用的上下文。代码如下：

 

var canvas—document．getElementById  (”xyfg”)；

Var context=canVas．getContext  (”2d”)；

 

接下来，基于这个上下文进行画线操作，主要是依次调用三个方法：begin—Path()、moveT0()和LineTo()，传人这条线的起点和终点坐标。代码如下：

 

context．beginPath  ()j

 

context．moveTo  (70，140)；

 

context．1ineTo  (140，140)；

 

最后在结束canvas操作的时候，通过调用context．stroke()方法完成斜线的制作。代码如下：           

             context.stroke ()；

 

提供代码动画方式来学编程的平台-H5eduHTML5开发教程在线观看下载