使用canvas绘图大致分为如下几个步骤
1.创建一个canvas标签，指定id、width、height属性
[html]
<canvas id=’firstCanvas’ width=’400′ height=’300′>不支持canvas标签</canvas>
[/html]
2.获取canvas对象
跟获取其他dome对象一样，可以使用dome对象获取的方式获取canvas对象
[javascript]
var canvas = document.getElementById(‘firstCanvas’);
[/javascript]
3.获取上下文
[javascript]
var context = canvas.getContext(’2d’);
[/javascript]
目前只有2d模式
4.设置画笔的样式
画笔的样式比较丰富，如设置填充的颜色
[javascript]
context.fillStyle = "#EEEEFF";
[/javascript]
5.绘制图形
canvas也提供了很多图形绘制的api，如填充一个矩形框
[javascript]
context.fillRect(50,50,100,100);
[/javascript]
下面我们利用以上步骤，绘制一些简单的图形
[html]
<!DOCTYPE html>
<html>
<head>
<title>canvas01</title>
<meta charset="UTF-8" />
<script type="text/javascript">
function draw(id) {
//步骤二：获取canvas对象
var canvas = $(id);
if (null == canvas) {
return;
}//步骤二END
//步骤三：获取上下文
var context = canvas.getContext(’2d’);
//步骤三END
//步骤四：设置画笔样式
context.fillStyle = "#EEEEFF";
//步骤四END
//步骤五：绘制图形
context.fillRect(0, 0, 400, 300);
//步骤五END
//以下是重复步骤四-步骤五
context.fillStyle = ‘red’;
context.lineWidth = 1;
context.fillRect(50, 50, 100, 100);
context.strokeStyle = ‘blue’;
context.strokeRect(50, 50, 100, 100);
}
function $(id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<!– 步骤一：创建canvas标签 –>
<canvas id="canvas01" width="400" height="300">
浏览器不支持canvas标签
</canvas>
</body>
</html>
[/html]
更多学习资料html5 firefox os javascript 请到5狐网，源码下载
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
