在HTML中放入canvas元素非常简单和直观，代码如下：
<canvas id="canvas"width="400"height="300"/></canvas>
以上代码会在页面上显示一块400像素×300像素的“隐藏”区块。要为其增加一个边框才可以看见它，代码如下：
<canvasid="xyfg"width="400"height="300"style="border:1pxsolid"></canvas>
程序的运行结果，如图8.1所示。
图8.1 canvas在页面上的显示效果
其中增加的“id＝‘xyfg’”属性是为了在开发过程中通过该id迅速找到该canvas元素并在其上画图。
下面在创建的画布上绘制一条斜线，实现步骤如下：(www.xing528.com)
首先，通过canvas的id值来获取对canvas对象的访问权。这里引用的id为xyfg，接着定义一个context变量，调用canvas对象的getContext方法，同时传入使用的canvas类型。因为是画二维的直线，所以传入“2d”来获取一个二维上下文，这也是到目前为止唯一可用的上下文。代码如下：
接下来，基于这个上下文进行画线操作，主要是依次调用三个方法：begin-Path（）、moveTo（）和LineTo（），传入这条线的起点和终点坐标。代码如下：
最后在结束canvas操作的时候，通过调用context.stroke（）方法完成斜线的制作。代码如下：
为了使画布上的绘图函数得以调用，需在脚本中设置监听事件：
window.addEventListener（＂load＂，drawDiagonal，true）；
本例的绘图效果如图8.2所示。
图8.2 在canvas画布上画线
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
