1.rect() 方法是单纯的画出一个矩形框,调用stroke() 或 fill()后才会真正作用于画布。
例如:
<!DOCTYPE html>
<html>
<head>
<title>canvas test</title>
</head>
<body>
<canvas id="mytest" width="200px" height="100px" style="border:1px solid red">
your browser does not support HTML5 canvas tag!
</canvas>
<script>
var c = document.getElementById('mytest');
var ctx = c.getContext('2d');
ctx.rect(0,0,100,50); //仅仅是画出一个区域
ctx.fillStyle = 'red';
ctx.fill();
</script>
</body>
</html>
样式:
2.fillRect() 方法是画出一个有填充颜色的矩形框(默认是黑色的)
例如:
<!DOCTYPE html>
<html>
<head>
<title>canvas test</title>
</head>
<body>
<canvas id="mytest" width="200px" height="100px" style="border:1px solid red">
your browser does not support HTML5 canvas tag!
</canvas>
<script>
var c = document.getElementById('mytest');
var ctx = c.getContext('2d');
//ctx.rect(0,0,100,50);
ctx.fillStyle = 'red';
ctx.fillRect(0,0,100,50); //如果不定义fillstyle,那么会显示默认的黑色
</script>
</body>
</html>
样式:
3.strokeRect() 方法是用一个预定义的笔触画出一个矩形框,你就可以想成使用一直有颜色的画笔去画一个矩形
例如
<!DOCTYPE html>
<html>
<head>
<title>canvas test</title>
</head>
<body>
<canvas id="mytest" width="200px" height="100px" style="border:1px solid red">
your browser does not support HTML5 canvas tag!
</canvas>
<script>
var c = document.getElementById('mytest');
var ctx = c.getContext('2d');
//ctx.rect(0,0,100,50);
//ctx.fillStyle = 'red';
ctx.strokeRect(20,20,100,50);
</script>
</body>
</html>
样式: