亚洲区国产区激情区无码区,国产成人mv视频在线观看,国产A毛片AAAAAA,亚洲精品国产首次亮相在线

HTML5 Canvas 繪制矩形

在HTML5畫布元素上最容易繪制的形狀之一是矩形。您可以使用2D上下文函數(shù)fillRect()和進(jìn)行操作strokeRect()。

在線示例

在HTML5畫布元素上最容易繪制的形狀之一是矩形。您可以使用2D上下文函數(shù)fillRect()和進(jìn)行操作strokeRect()。這是一個簡單的示例：

<canvas id="ex1" width="500" height="150" style="border: 1px solid #cccccc;">    
HTML5 Canvas not supported    
</canvas>    
<script>       
var canvas  = document.getElementById("ex1");    
var context = canvas.getContext("2d");    
context.fillStyle = "#ff0000";    
context.fillRect(10,10, 100,100);    
context.strokeStyle = "#0000ff";    
context.strokeRect(30,20, 120,110);      
</script>
測試看看 ?/?

行寬 - lineWidth

您可以使用lineWidth2D上下文的屬性設(shè)置描邊矩形的線寬。方法如下：

<canvas id="ex4" width="500" height="150" style="border: 1px solid #cccccc;">    
HTML5 Canvas not supported    
</canvas>    
<script>       
var canvas  = document.getElementById("ex4");    
var context = canvas.getContext("2d");    
var x = 10;    
var y = 10;    
var width = 100;    
var height = 100;    
context.lineWidth = 4;    
context.strokeRect(x, y, width, height);      
</script>
測試看看 ?/?

這是線寬為4的矩形的外觀：

HTML5 Canvas not supported

矩形顏色

您可以使用 2D上下文的fillStyle或strokeStyle屬性設(shè)置繪制矩形的顏色。這是第一個示例，這些設(shè)置以粗體顯示:

<canvas id="ex5" width="500" height="150" style="border: 1px solid #cccccc;">    
HTML5 Canvas not supported    
</canvas>    
<script>       
var canvas  = document.getElementById("ex5");    
var context = canvas.getContext("2d");    
context.fillStyle = "#ff0000";    
context.fillRect(10,10, 100,100);    
context.strokeStyle = "#0000ff";    
context.strokeRect(30,20, 120,110);    
</script>
測試看看 ?/?

這是再次在畫布上繪制的矩形:

HTML5 Canvas not supported