欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

html5 怎么設置矩形

html
林子帆2年前9瀏覽0評論

HTML5是一種用于網頁開發的標準。在網頁中，經常需要設置各種元素的形狀，其中矩形是最常見的一種。那么，HTML5如何設置矩形呢？

<!DOCTYPE html>
<html>
<head>
<style>
/* 定義一個樣式類rect */
.rect {
width: 200px;
height: 100px;
background-color: #f00;
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="rect"></div></body>
</html>

上面的代碼中，我們定義了一個樣式類rect，它的屬性包括寬度、高度、背景色、邊框等。在HTML中，我們可以使用div元素來代表一個區塊，然后通過設置該元素的class屬性為rect，讓它應用我們定義的樣式。

在實際開發中，還可以使用canvas元素繪制矩形。例如：

<!DOCTYPE html>
<html>
<head>
<script>
function drawRect() {
// 在id為myCanvas的canvas元素上繪制一個紅色矩形
var ctx = document.getElementById("myCanvas").getContext("2d");
ctx.fillStyle = "#f00";
ctx.fillRect(10, 10, 200, 100);
}
</script>
</head>
<body onload="drawRect()">
<canvas id="myCanvas" width="300" height="150"></canvas>
</body>
</html>

通過在JavaScript中調用canvas元素的上下文（context）對象的fillRect方法，可以在畫布上繪制指定位置和大小的矩形。