HTML繪制帶邊框矩形

獨的一個canvas標記只是在頁面中定義了一塊矩形區域，并無特別之處。開發人員只有配合使用javascript腳本，才能夠完成各種圖形、線條以及復雜的圖形變換操作。與基于SVG實現同樣繪圖效果來比較，canvas繪圖是一種像素級別的位圖繪圖技術，而SVG則是一種矢量繪圖技術。

使用canvas和javascript繪制一個矩形，可能會涉及一個或多個方法，如下表所示：

（1）編寫代碼如下圖所示，在<body>標簽中加入以下代碼。

（2）在瀏覽器中打開文件，預覽效果圖如下所示，可以看到網頁中，在一個藍色邊框中顯示了一個藍色長方形。

小提示：上面代碼中，首先定義一個畫布對象，其id名稱為myCanvas，其高度和寬度為500像素，并定義了畫布邊框顯示樣式。在javascript代碼中，首先獲取畫布對象，然后使用getcontext獲取當前2D的上下文對象。并使用fillrect繪制一個矩形。其中涉及一個fillstyle屬性，fillstyle用于設置填充的顏色、透明度等。如果設置為“rgb（200,0,0）”，則表示一個顏色，不透明；如果設置為“rgba（0,0,200,0.5）”，則表示顏色為一個顏色，透明度為50%。

trokeRect(x,y,width,height) 只繪制邊框但沒有填充

strokeRect()與fillRect()參數都相同,只是fillRect()方法繪制的是填充顏色的矩形;而strokeRect()方法繪制的是只有邊框的矩形。

實例：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<title>繪制矩形</title>
<script type="text/javascript">
function drawRect(){
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.strokeStyle = "006633";
ctx.strokeRect(200,50,100,80);
}
</script>
<style type="text/css">
myCanvas{border:1px solid black;}
</style>
</head>
<body>
<input type="button" value="繪制矩形" onclick="drawRect()"/><br />
<canvas id="myCanvas"></canvas>
</body>
</html>

繪制調色板

充矩形

<!DOCTYPE html>
<html>
<head>
<meta charset=" ">
<title>填充矩形</title>
<script type="text/javascript">
function draw(){
    var canvas = document.getElementById('myCanvas');
    if (canvas.getContext){
    var ctx = canvas.getContext('2d');
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0,0,150,75);
    ctx.fillStyle = "rgba(0,0,200,0.5)";
    ctx.fillRect(50,30,150,75);
    }
}
</script>
<!--style標記內是CSS語法-->
<style type="text/css">
canvas { border: 1px solid black; } //將框線設為1px
</style>
</head>
<body onload="draw();">
<canvas id="myCanvas"></canvas>
</body>
</html>

canvas使用步驟說明：

1 <canvas>創建的繪圖區一開始是空白的,首先需要使用JavaScript的getElementById獲取DOM的canvas元素(element)。

var canvas = document.getElementById('myCanvas');

2 為了避免不支持canvas的瀏覽器運行JavaScript時出現錯誤,可以先用if條件測試是否能獲取canvas的getContext方法

if(canvas.getContext){
//但getContext存在時,會運行這里的語句
}else{
//但getContext不存在時,會運行這里的語句
}

3 創建2d context對象

var ctx = canvas.getContext("2d');

4 使用fillStyle屬性指定圖形的顏色為紅色

ctx.fillStyle = "#FF00000";
ctx.fillStyle = "rgba(0,0,200,0.5)";

5 fillRect屬性用于繪制矩形并且指定繪制方向和大小

ctx.fillRect (0,0,150,75);

(0,0,150,75) 這4個數值分別代表矩形的起始點坐標(x,y),寬(width)和高(height)

在線咨詢

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

HTML繪制帶邊框矩形

您的項目需求