【网页设计】如何在页面中放置canvas元素？

2016-08-24 来源：网页设计

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

在HTML页面中插入canvas元素是非常直观和简单的，如下面的代码就是一段可以被插入到HTML页面中的canvas代码。

以上代码会在页面上显示出一块200像素×200像素的“隐藏”区域。假如要为其增加一个边框，可以用标准CSS边框属性来设置。代码如下。

在上面的代码中,不但用CSS边框属性设置了边框,而且还增加了一个值为“djx”的di特性，这样做的主要目的是为了在开发过程中可以通过id来快速找到该canvas元素。对于任何canvas来说，id是尤为重要的，这主要是因为对canvas元素的所有操作都是通过脚本代码控制的，如果没有id的话，想要找到要操作的canvas元素会很难。

首先，通过应用特定的canvas id值来获取对canvas对象的访问权。这里引用的id为djx。接着定义一个context变量，调用canvas对象的getContext方法，同时传入使用的canvas类型。这里是通过传入“2d”来获取一个二维上下文，这也是到目前为止唯一可用的上下文。具体代码如下所示。

var canvas=document.getElementByld('djx');

var context=canvas.getContext('2d');

接下来，基于这个上下文执行划线的操作，主要是调用了3个方法——beginpath、moveTo和lineTo，传入了这条线的起点和终点的坐标。决堤代码如下所示。

content.beginPath();

context.moveTo(70,140);

context.lineTo(140,70);

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

context.stroke();

}

window.addEventListener("load",drawDiagonal,true);

html5