canvas学习笔记(一)-认识canvas

时间:2024-05-27 11:07:38

canvas是html5新增的一个标签,主要用于图形的绘制。我们可以把它理解为是浏览器给我们提供了一个画板,至于要绘制怎样的画卷,就看神笔马良你的主意了。而在canvas上绘制图形使用的笔,就是js了。

使用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狐网,源码下载