我觉得学一门新技术，边学边作记录，这样效果更好。以后关于我写的HTML5都是看《HTML5程序设计》的记录。
首先咱也看看咱的浏览器支持HTML5不？不支持的话，就赶快升级吧！
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> window.onload = function () { try { document.createElement("canvas").getContext("2d");//这一步就是创建一个Canvas元素，可以在上面画2d的图像。
//这一步的作用就是如果你的浏览器支持HTML5，它就执行下面的一句代码，在id="support"的div中显示支持HTML5的提示，否则如果不支持那么就会出错,执行catch代码中的代码。懂了吧！
document.getElementById("support").innerHTML = "你的浏览器支持HTML5。"; } catch (e) { document.getElementById("support").innerHTML = "你的浏览器不支持HTML5，赶快升级一下吧！"; } } </script> </head> <body> <div id="support"></div> </body> </html>
由于我升级到IE9了，而IE9是支持的，效果如下图：
如果你的浏览器是IE9以前的浏览器，你复制上面的一段代码自己去看显示什么吧。
下面我们在页面上添加一个canvas元素，然后我们可以看到它也可以使用CSS来控制样式。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> #diagonal { border: 1px solid red; width: 200px; height: 200px; } </style> </head> <body> <canvas id="diagonal"> </canvas> </body> </html>
下面我们来划一条斜线吧。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> #diagonal { border: 1px solid red; width: 200px; height: 200px; } </style> <script type="text/javascript"> function drawDiagonal() { //取得canvas元素及其绘图上下文 var canvas = document.getElementById("diagonal"); var context = canvas.getContext("2d");//传入"2d"获取二维的上下文。听说传入3d的API工作已完成了，
//传入“webgl"即可获得三维的上下文，不过我在ie9中试了，结果context为null,看来IE9不支持WEBGL规范。 //用绝对坐标来创建一条路径 context.beginPath(); context.moveTo(70, 140); context.lineTo(140, 70); //将这条线绘制到canvas画布上去。 context.stroke(); } window.addEventListener("load", drawDiagonal, true); </script> </head> <body> <canvas id="diagonal"> </canvas> </body> </html>
这里调用了三个方法：beginPath、moveTo和lineTo,传到这条线的起点和终点的坐标。相信大家应该都知道原点(0，0)是在左上角吧。
方法moveTo和lineTo实际上并不是画线，而是通过调用stroke方法完成线条绘制。效果如下：
这条以后我感觉显示不对，我就用附件的画图试着找到两个点(70,140)(140,70)画了一下，如下图，要你想不明白你也自己画一下吧！
像前面的对上下文的很多操作（如果moveTo、lineTo、beginPath、设置样式和外观的函数）都不会直接在页面上显示出来，只有当对路径应用绘制(stroke) or 填充(fill)方法时，才会显示那些操作的结果。