绘制矩形(Drawing Rectangles)
优质
小牛编辑
130浏览
2023-12-01
在画布上绘制矩形有三种方法 -
Sr.No. | 方法和描述 |
---|---|
1 | fillRect(x,y,width,height) 此方法绘制一个填充矩形。 |
2 | strokeRect(x,y,width,height) 此方法绘制矩形轮廓。 |
3 | clearRect(x,y,width,height) 此方法清除指定区域并使其完全透明 |
这里x和y指定矩形左上角的画布上的位置(相对于原点), width和height是矩形的width和height 。
例子 (Example)
下面是一个简单的例子,它利用上面提到的方法绘制一个漂亮的矩形。
<!DOCTYPE HTML>
<html>
<head>
<style>
#test {
width: 100px;
height:100px;
margin: 0px auto;
}
</style>
<script type = "text/javascript">
function drawShape() {
// Get the canvas element using the DOM
var canvas = document.getElementById('mycanvas');
// Make sure we don't execute when canvas isn't supported
if (canvas.getContext) {
// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');
// Draw shapes
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');
}
}
</script>
</head>
<body id = "test" onload = "drawShape();">
<canvas id = "mycanvas"></canvas>
</body>
</html>