Canvas 绘制矩形(rect()，strokeRect()，fillRect())
叶鹭洋
demo.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<canvas id="cvs" width="500" height="500"></canvas>
<script>
var cvs = document.getElementById('cvs');
var ctx = cvs.getContext('2d');
/*
* 画一个矩形路径：
* ctx.rect( 起点x轴坐标，起点y轴坐标，宽，高 );
* */
ctx.rect( 30, 10, 50, 50 );
ctx.stroke(); //需要手动调用 stroke()或fill()方法绘制。
/*
* 绘制一个描边矩形，直接绘制,不需要手动调用stroke()：
* ctx.strokeRect( 起点x轴坐标，起点y轴坐标，宽，高 )
* */
ctx.strokeRect( 30, 100, 50, 50 );
/*
* 绘制一个填充矩形，直接绘制,不需要手动调用fill()：
* ctx.fillRect( 起点x轴坐标，起点y轴坐标，宽，高 )
* */
ctx.fillRect( 30, 170, 50, 50 );
</script>
</body>
</html>
类似资料：