HTML5 canvas学习笔记（一）

canvas是HTML5中新增的标签，下面是各浏览器的支持程度：

 

canvas的默认大小为：宽-300px，高-150px（注意：画布的大小作为canvas标签的行内样式设置，而且是没有“px”单位的哦，  如果你在canvas的css样式中给它设置大小，它只会当做放大比例来处理！），下面这段代码在支持canvas的浏览器中会显示一块400px400px的白色（默认颜色）画布，在不支持canvas的浏览器中只是显示canvas中的文字而已哦。 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas</title>
    <style type="text/css">
    body{ background:gray;}    
    #c1{ background:white;}
    </style>
</head>
<body>
    <!-- 默认宽300， 高150 -->
    <canvas id="c1" width="400" height="400">
        你的浏览器不支持canvas..
    </canvas>
</body>
</html>

 下面我们在刚刚创建的画布中画一个带有边框的矩形：

var oC = document.getElementById("c1");

        var oGC = oC.getContext('2d');    //创建一个绘图环境

        oGC.fillStyle = 'red';    //设置填充样式
        oGC.strokeStyle = 'blue';    //设置表框样式
        oGC.lineWidth = 10;    //设置边框的大小
        oGC.lineJoin = 'round';    //端点的样式-圆角
        //oGC.lineJoin = 'bevel';    //斜线
        
        oGC.fillRect(50, 50, 100, 100);    //在50,50处画一个矩形，并填充它
        oGC.strokeRect(50.5, 50.5, 100, 100);    //在来画个边框

 

 效果图见：http://runjs.cn/code/vvdbykgz

 不知道大家注意到没有，上面代码中最后一行oGC.strokeRect(50.5, 50.5, 100, 100);为什么起始坐标还要加上个0.5像素?这是因为如果边框长度是1像素的话，他从50,50开始两边各占0.5，这个0.5像素给浏览器是不好显示的，所以浏览器只好各边给你一个像素，结果最后就是2个像素的宽度了，这就是为什么要加那0.5个像素了。

 

我们还可以绘制两个或多个图形， 通过binginPath()和closePath()来控制路径：

        var oC = document.getElementById("c1");

        var oGC = oC.getContext('2d');
        
        oGC.beginPath();
        oGC.moveTo(100, 100);
        oGC.lineTo(200, 200);
        oGC.lineTo(300, 200);
        oGC.closePath();
        oGC.stroke();

        oGC.beginPath();
        oGC.moveTo(100, 200);
        oGC.lineTo(200, 300);
        oGC.lineTo(300, 300);
        oGC.closePath();
        oGC.fill();

 效果图见：http://runjs.cn/code/lmrv8iuo

 

通过clearRect()可以清除画布中某个区域的数据，我们再结合定时器可以创建一个方块移动的效果：

var oC = document.getElementById("c1");

var oGC = oC.getContext('2d');

var num = 0;
oGC.fillRect(0, 0, 100, 100);

setInterval(function(){
    num++;
    oGC.clearRect(0, 0, oC.width, oC.height);
    oGC.fillRect(num, num, 100, 100);
}, 30);

 

效果图见：http://runjs.cn/code/prkby9xp

 

posted @ 2013-09-29 17:14  CodingMonkey  阅读(735)  评论(0)  编辑  收藏  举报