這篇文章主要為大家展示了“如何利用HTML5 Canvas API繪制矩形”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“如何利用HTML5 Canvas API繪制矩形”這篇文章吧。
使用closePath()閉合圖形
首先我們用最普通的方法繪制一個矩形。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>繪制矩形</title>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的瀏覽器居然不支持Canvas？！趕快換一個吧??！
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(150,50);
context.lineTo(650,50);
context.lineTo(650,550);
context.lineTo(150,550);
context.lineTo(150,50); //繪制最后一筆使圖像閉合
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
}
</script>
</body>
</html>
</body>
</html>運行結果：
乍一看沒啥問題，但是視力好的童鞋已經發現了，最后一筆閉合的時候有問題，導致左上角有一個缺口。這種情況是設置了lineWidth導致的。如果默認1筆觸的話，是沒有問題的。但是筆觸越大，線條越寬，這種缺口就越明顯。那么這種情況該怎么避免呢？
標題已經劇透了，使用clothPath()閉合圖形。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>繪制矩形</title>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的瀏覽器居然不支持Canvas？！趕快換一個吧??！
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(150,50);
context.lineTo(650,50);
context.lineTo(650,550);
context.lineTo(150,550);
context.lineTo(150,50); //最后一筆可以不畫
context.closePath(); //使用closePath()閉合圖形
context.lineWidth = 5;
context.strokeStyle = "black";
context.stroke();
}
</script>
</body>
</html>
</body>
</html>運行結果：
這個例子結合上節課的講解，我們知道了繪制路徑的時候需要將規劃的路徑使用beginPath()與closePath()包裹起來。當然，最后一筆可以不畫出來，直接使用closePath()，它會自動幫你閉合的。(所以如果你不想繪制閉合圖形就不可以使用closePath())
給矩形上色
這里我們要介紹一個和stroke()同等重要的方法fill()。和當初描邊一樣，我們在填色之前，也要先用fillStyle屬性選擇要填充的顏色。
比如我們要給上面的矩形涂上黃色，可以這樣寫。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>繪制矩形</title>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的瀏覽器居然不支持Canvas？！趕快換一個吧??！
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(150,50);
context.lineTo(650,50);
context.lineTo(650,550);
context.lineTo(150,550);
context.lineTo(150,50); //最后一筆可以不畫
context.closePath(); //使用closePath()閉合圖形
context.fillStyle = "yellow"; //選擇油漆桶的顏色
context.lineWidth = 5;
context.strokeStyle = "black";
context.fill(); //確定填充
context.stroke();
}
</script>
</body>
</html>
</body>
</html>運行結果：
這里需要注意的是一個良好的編碼規范。因為之前說過了Canvas是基于狀態的繪制，只有調用了stroke()和fill()才確定繪制。所以我們要把這兩行代碼放在最后，其余的狀態設置的代碼放在它們之前，將狀態設置與確定繪制的代碼分隔開。增強代碼的可讀性。
封裝繪制方法
大家一定發現了，繪制矩形其實都是這樣的四筆，我們每次用這種笨方法畫矩形都要畫這四筆有多麻煩，如果我們要花10個矩形？100個？1000個？都這樣寫，代碼會臃腫，復用性很低。這里，我們可以使用JavaScript封裝這些方法。我們知道，一個矩形可以由它的左上角坐標和其長寬唯一確定。
JavaScript函數
這里我們介紹一下JavaScript函數。如果有基礎的同學可以跳過這一大段，直接看后面的。
JavaScript 和 ActionScript 語言的函數聲明調用一樣，都是編程語言中最簡單的。
函數的作用
函數的作用，可以寫一次代碼，然后反復地重用這個代碼。如:我們要完成多組數和的功能。
var sum; sum = 3+2; alert(sum); sum=7+8 ; alert(sum); .... //不停重復兩行代碼
如果要實現8組數的和，就需要16行代碼，實現的越多，代碼行也就越多。所以我們可以把完成特定功能的代碼塊放到一個函數里，直接調用這個函數，就省去重復輸入大量代碼的麻煩。
使用函數完成:
function add2(a,b){
sum = a + b;
alert(sum);
} // 只需寫一次就可以
add2(3,2);
add2(7,8);
.... //只需調用函數就可以定義函數
如何定義一個函數呢？看看下面的格式：
function 函數名( )
{
函數體;
}function定義函數的關鍵字，“函數名”你為函數取的名字，“函數體”替換為完成特定功能的代碼。
函數調用
函數定義好后，是不能自動執行的，需要調用它，直接在需要的位置寫函數名。一般有兩種方式：
第一種情況：在<script>標簽內調用。
<script>
function tcon()
{
alert("恭喜你學會函數調用了!");
}
tcon(); //調用函數，直接寫函數名。
</script>第二種情況：在HTML文件中調用，如通過點擊按鈕后調用定義好的函數。
這種情況以后用到了再說。
有參數的函數
格式如下：
function 函數名(參數1,參數2)
{
函數代碼
}注意:參數可以多個，根據需要增減參數個數。參數之間用(逗號，）隔開。
按照這個格式，函數實現任意兩個數的和應該寫成：
function add2(x,y)
{
sum = x + y;
document.write(sum);
}x和y則是函數的兩個參數，調用函數的時候，我們可通過這兩個參數把兩個實際的加數傳遞給函數了。
例如，add2(3，4)會求3+4的和，add2(60,20)則會求出60和20的和。
返回值函數
function add2(x,y)
{
sum = x + y;
return sum; //返回函數值,return后面的值叫做返回值。
}這里的return和其他語言中的一樣，但是在JS或者AS等弱類型語言中，返回值類型是不需要寫到函數聲明里的。
至此，我們把JavaScript函數也順便系統的說了一下。下面回到正題~
我們也可以封裝一下我們的矩形，代碼如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>封裝繪制矩形方法</title>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的瀏覽器居然不支持Canvas？！趕快換一個吧??！
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
drawRect(context, 150, 50, 50, 50, "red", 5, "blue");
drawRect(context, 250, 50, 50, 50, "green", 5, "red");
drawRect(context, 350, 50, 50, 50, "yellow", 5, "black");
}
function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){
cxt.beginPath();
cxt.moveTo(x, y);
cxt.lineTo(x + width, y);
cxt.lineTo(x + width, y + height);
cxt.lineTo(x, y + height);
cxt.lineTo(x, y);
cxt.closePath();
cxt.lineWidth = borderWidth;
cxt.strokeStyle = borderColor;
cxt.fillStyle = fillColor;
cxt.fill();
cxt.stroke();
}
</script>
</body>
</html>
</body>
</html>運行結果：
使用rect()方法繪制矩形
猶豫繪制矩形是常用的方法，所以在Canvas API中已經幫我們封裝好了一個繪制矩形的方法——rect()。這個方法接收4個參數x, y, width, height，實際調用時也就是
context.rect(x,y,width,height);
基于此，我們幫剛才封裝的方法優化一下。
function drawRect(cxt, x, y, width, height, fillColor, borderWidth, borderColor){
cxt.beginPath();
cxt.rect(x, y, width, height);
//cxt.closePath(); 可以不用closePath()
cxt.lineWidth = borderWidth;
cxt.strokeStyle = borderColor;
cxt.fillStyle = fillColor;
cxt.fill();
cxt.stroke();
}調用封裝方法，繪制魔性圖像
來個有魔性的圖像~
好，我們就拿它開刀，練練手，給咱剛封裝好的方法活動活動筋骨。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>繪制魔性圖形</title>
</head>
<body>
<div id="canvas-warp">
<canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">
你的瀏覽器居然不支持Canvas？！趕快換一個吧??！
</canvas>
</div>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
var context = canvas.getContext("2d");
context.beginPath();
context.rect(0, 0, 800, 600);
context.fillStyle = "#AA9033";
context.fill();
context.beginPath();
for(var i=0; i<=20; i++){
drawWhiteRect(context, 200 + 10 * i, 100 + 10 * i, 400 - 20 * i, 400 - 20 * i);
drawBlackRect(context, 205 + 10 * i, 105 + 10 * i, 390 - 20 * i, 390 - 20 * i);
}
context.beginPath();
context.rect(395, 295, 5, 5);
context.fillStyle = "black";
context.lineWidth = 5;
context.fill();
context.stroke();
}
function drawBlackRect(cxt, x, y, width, height){
cxt.beginPath();
cxt.rect(x, y, width, height);
cxt.lineWidth = 5;
cxt.strokeStyle = "black";
cxt.stroke();
}
function drawWhiteRect(cxt, x, y, width, height){
cxt.beginPath();
cxt.rect(x, y, width, height);
cxt.lineWidth = 5;
cxt.strokeStyle = "white";
cxt.stroke();
}
</script>
</body>
</html>
</body>
</html>運行結果：
是不是很有魔性？是不是非常的酷？這段代碼就不花篇幅解釋了，大家自己課下琢磨琢磨，也可以嘗試著用已經學過的知識去繪制一個酷酷的圖像。這節課內容有點多，其實也只是介紹了四個屬性和方法——closePath()、fillStyle、fill()、rect()，還有一個擴展的JavaScript函數講解。
Canvas實現圖片圓角效果
本規則適用于各種Canvas繪制的規則或不規則圖形。
Canvas實現圖片圓角的關鍵是使用“紋理填充”。
Canvas中有個名為createPattern的方法，可以讓已知尺寸的圖片元素轉換成紋理對象，作填充用。
舉個板栗，如果實現名為test.jpg的圖片圓形效果，大小100px * 100px, 則主要JS代碼如下：
// canvas元素, 圖片元素
var canvas = document.querySelector("#canvas"), image = new Image();
var context = canvas.getContext("2d");
image.onload = function() {
// 創建圖片紋理
var pattern = context.createPattern(image, "no-repeat");
// 繪制一個圓
context.arc(50, 50, 50, 0, 2 * Math.PI);
// 填充繪制的圓
context.fillStyle = pattern;
context.fill();
};
image.src = "test.jpg";讓Canvas上下文的fillStyle屬性值等于這個紋理對象就可以了。
Canvas自帶的矩形繪制API是不帶圓角屬性的，因此，demo中的圓角矩形使用了自定義方法。我簡單瞅了瞅，要實現垂直、水平方向不同圓角大小略折騰，本著示意的目的，就沒大動干戈，所以demo的圓角是對稱的。
以上是“如何利用HTML5 Canvas API繪制矩形”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
