路径方式绘制 - 矩形 | rect()
canvas/shape/path/rect.html
<!DOCTYPE HTML>
<html>
<head>
<title>以路径的方式在 canvas 上绘制矩形的 demo</title>
</head>
<body>
<canvas id="canvas" width="300" height="360" style="background-color: rgb(222, 222, 222)">
您的浏览器不支持 canvas 标签
</canvas>
<br/>
<button type="button" onclick="drawIt();">在画布上绘制矩形</button>
<button type="button" onclick="clearIt();">清除画布</button>
<script type="text/javascript">
var ctx = document.getElementById('canvas').getContext('2d');
function drawIt() {
clearIt();
ctx.strokeStyle = "Black";
/*
* context.rect(x, y, w, h) - 以路径的方式绘制一个矩形
* x - 矩形左上角的 x 坐标
* y - 矩形左上角的 y 坐标
* w - 矩形的宽
* h - 矩形的高
*/
ctx.beginPath();
ctx.rect(20, 20, 260, 320);
ctx.stroke();
}
function clearIt() {
ctx.clearRect(0, 0, 300, 360);
}
</script>
</body>
</html>