欢迎访问我的个人博客：三秋邦

HTML5 Canvas API

　　我觉得学一门新技术，边学边作记录，这样效果更好。以后关于我写的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)方法时，才会显示那些操作的结果。

　　

posted @ 2012-09-28 22:49  追夢  阅读(2065)  评论(0)  编辑  收藏  举报
欢迎访问我的个人博客：三秋邦