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

2016-08-24 1610 2 编辑:深色多郎 来源:网页设计

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

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

<canvas width="200" height="200"></canvas>

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

<canvas id="djx" style="border" width="200" height="200"></canvas>

在上面的代码中,不但用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

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联
我们猜你喜欢