HTML5学习笔记（四）

来源：互联网发布：linux cgi 编辑：程序博客网时间：2024/06/05 00:34

HTML5 Canvas（续）

一、替代内容

在访问页面时，如果浏览器不支持canvas元素，那么就需要提供一份替代代码，来告知访问者出现的问题。

下面这段代码就是实现这一功能：

Update yourbrowser tp enjoy canvas!!

</canvas>

在不支持Canvas的IE8.0中打开，效果如下：

二、检测浏览器支持情况

在创建canvas元素之前可以先对浏览器进行检测，确保浏览器可以支持。这段代码按照书上的代码并不会正确运行，通过查找相关资料，我发现书上的代码其实是不完整的，将代码写成下面的样子就可以正常运行了。

window.onload = function ()

{

try {

document.createElement("canvas").getContext("2d");

document.getElementById("support").innerHTML = "你的浏览器支持HTML5。";

}

catch (e) {

document.getElementById("support").innerHTML = "你的浏览器不支持HTML5，赶快升级一下吧！";

}

</script>

<body>

</div>

</body>

分别用Chrome36.0和IE8.0做测试，因为Chrome36.0是支持canvas的，因此它的运行结果应该是显示“你的浏览器支持HTML5。”而IE8.0不支持canvas因此它的运行结果应该是显示“你的浏览器不支持HTML5，赶快升级一下吧！”。效果如下图所示

三、在页面中加入canvas

通过如下的代码可以在页面中建立一块隐藏的区域

其中参数height用来指定区域的高度，width用来指定区域的宽度，这个区域是隐藏的，在页面中并不能直接观察到。但是通过给区域加上边框，就可以通过边框查找到区域的位置了。

效果如图所示

完成了上面的操作之后就可以在上面“画画”，最简单的画一条直线。代码如下

</canvas>

window.onload =function ()

{

var canvas =document.getElementById("diagonal");

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

context.beginPath();

context.moveTo(70, 140);

context.lineTo(140, 70);

context.stroke();

}

</script>

其中var canvas = document.getElementById("diagonal");通过canvasID获取canvas对象的访问权限。

var context = canvas.getContext("2d");使用canvas对象的getContext方法传入希望使用的canvas类型。

下面的几行就是画图的基本操作：

beginPath():不论开始绘制何种图形，第一个需要调用的就是beginPath。这个简单的函数不带任何参数，它用来通知canvas将要开始绘制一个新的图形了。

moveTo(x,y):不绘制，将当前位置移动到新的目标坐标(x,y)。

lineTo(x,y):不仅将当前位置移动到新的目标坐标(x,y)，而且在两个坐标之间画一条直线，实际上moveTo和lineTo只是传入了这条直线的起始点，并没有真正划线，而是在结束canvas操作时，通过调用context.stroke()方法完成线条的绘制。效果如下图所示：

0 0