如何用canvas繪製長方形？ canvas畫矩形的兩種方法介紹
- 不言原創
- 2018-09-17 13:43:4517319瀏覽
canvas元素使用JavaScript在網頁上繪製圖像。畫布是一個矩形區域，您可以控制其每個像素。 canvas 擁有多種繪製路徑、矩形、圓形、字元以及添加圖像的方法。所以，如何用canvas繪製一個長方形呢？ 接下來這篇文章將要為大家介紹關於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更多的相關知識可以參考HTML5開發手冊。
以上是如何用canvas繪製長方形？ canvas畫矩形的兩種方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn