溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了使用canvas繪制矩形有哪些方法，代碼簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
我們需要知道的是在canvas中與矩形相關的方法是rect()，使用 stroke() 或 fill() 方法在畫布上實際地繪制矩形。
rect()方法能接收 4 個參數：矩形的 x 坐標、矩形的 y 坐標、矩形寬度和矩形高度。這些參數的單位都是像素。
下面我們就來分別利用strokerect()和fillrect()方法來實現繪制矩形。
首先，我們來看看利用canvas中fillrect()方法繪制的有填充的矩形實例。
fillRect() 方法在畫布上繪制的矩形會填充指定的顏色。填充的顏色通過fillStyle 屬性指定。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用canvas畫矩形</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script type="text/javascript">
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d'); //getContext() 方法可返回一個對象
context.fillStyle = "green"; // 設置或返回用于填充繪畫的顏色、漸變或模式
context.fillRect(50,50,400,300); // x軸 y軸 寬 和 高 ,繪制“被填充”的矩形
}
draw("canvas");
</script>
</body>
</html>canvas畫有填充矩形的效果如下：
然后我們來看一看利用canvas中strokerect()方法繪制的無填充的矩形實例。
strokeRect() 方法在畫布上繪制的矩形會使用指定的顏色描邊。描邊顏色通過strokeStyle 屬性指定。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用canvas畫矩形</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script type="text/javascript">
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext('2d'); //getContext() 方法可返回一個對象
context.strokeStyle = "pink"; //圖形邊框的填充顏色
context.lineWidth = 5; //用寬度為 5 像素的線條來繪制矩形：
context.strokeRect(50,50,180,120); //繪制矩形（無填充）
context.strokeRect(110,110,180,120);
}
draw("canvas");
</script>
</body>
</html>canvas畫無填充矩形的效果如下：
上述內容就是使用canvas繪制矩形有哪些方法，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
