HTML繪制帶邊框矩形

獨(dú)的一個(gè)canvas標(biāo)記只是在頁(yè)面中定義了一塊矩形區(qū)域，并無(wú)特別之處。開(kāi)發(fā)人員只有配合使用javascript腳本，才能夠完成各種圖形、線條以及復(fù)雜的圖形變換操作。與基于SVG實(shí)現(xiàn)同樣繪圖效果來(lái)比較，canvas繪圖是一種像素級(jí)別的位圖繪圖技術(shù)，而SVG則是一種矢量繪圖技術(shù)。

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

（1）編寫(xiě)代碼如下圖所示，在<body>標(biāo)簽中加入以下代碼。

（2）在瀏覽器中打開(kāi)文件，預(yù)覽效果圖如下所示，可以看到網(wǎng)頁(yè)中，在一個(gè)藍(lán)色邊框中顯示了一個(gè)藍(lán)色長(zhǎng)方形。

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

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

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

實(shí)例：

<!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>

繪制調(diào)色板

充矩形

<!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標(biāo)記內(nèi)是CSS語(yǔ)法-->
<style type="text/css">
canvas { border: 1px solid black; } //將框線設(shè)為1px
</style>
</head>
<body onload="draw();">
<canvas id="myCanvas"></canvas>
</body>
</html>

canvas使用步驟說(shuō)明：

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

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

2 為了避免不支持canvas的瀏覽器運(yùn)行JavaScript時(shí)出現(xiàn)錯(cuò)誤,可以先用if條件測(cè)試是否能獲取canvas的getContext方法

if(canvas.getContext){
//但getContext存在時(shí),會(huì)運(yùn)行這里的語(yǔ)句
}else{
//但getContext不存在時(shí),會(huì)運(yùn)行這里的語(yǔ)句
}

3 創(chuàng)建2d context對(duì)象

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個(gè)數(shù)值分別代表矩形的起始點(diǎn)坐標(biāo)(x,y),寬(width)和高(height)

在線咨詢(xún)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

HTML繪制帶邊框矩形

您的項(xiàng)目需求