溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“HTML5 Canvas如何繪制矩形和三角形”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“HTML5 Canvas如何繪制矩形和三角形”這篇文章吧。
矩形
Canvas矩形的繪制有兩種方式，一種方式是用stroke()畫一條線，圍成矩形框；另一種方式是用fillRect()直接填充出矩形。后一種方式比較常用，而且相對簡單，只需要指定矩形的左上角坐標和右下角坐標即可繪出一個矩形。
用線條圍出一個矩形的示例代碼如下：
ctx.strokeStyle ="FF0000";//線的顏色為紅色
ctx.lineWidth=2; //線寬為2像素
ctx.fillStyle ="blue"; //填充色是藍色
ctx.moveTo(10, 10); //給路徑一個起點
ctx.lineTo(10, 400); //給路徑一個終點，出左邊
ctx.lineTo(400, 400); //給路徑一個終點，出下邊
ctx.lineTo(400, 10); //給路徑一個終點，出右邊
ctx.lineTo(10, 10); //給路徑一個終點，出上邊
ctx.fill(); //注意,fill()在前,stroke()在后,否則會出錯
ctx.stroke();
這種方法有一個不足，就是不能直接填充空白區域。
用填充矩形命令畫一個矩形的示例代碼如下：
ctx.fillStyle = "blue"; //填充色為藍色
ctx.strokeStyle ="red"; //描邊為紅色
ctx.lineWidth = 2;
ctx.fillRect(10, 10, 400, 400);
ctx.strokeRect(10, 10, 400, 400);
三角形
沒有專門用來繪制三角形的方法，因此只能通過畫線圍邊的辦法來實現，示例代碼如下：
ctx.fillStyle="red";
ctx.beginPath();
ctx.moveTo(125,150);
ctx.lineTo(300,275);
ctx.lineTo(300,25);
ctx.fill();
以上是“HTML5 Canvas如何繪制矩形和三角形”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
