您的位置：首页 > Web前端 > HTML5

HTML5 canvas学习笔记（一）

2013-09-29 17:14 513 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航