canvas--繪製路徑-三角形
阿新 • • 發佈：2020-08-12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
canvas {
border: 1px solid black;
}
</style>
<body>
<!-- 繪製路徑(path)多邊形 -->
<canvas id="tutorial" width="300" height="300"> 你的瀏覽器不支援canvas,請升級你的瀏覽器</canvas>
<script>
// 繪製線段
function draw(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath(); //新建一條path
ctx.moveTo(50, 50); //把畫筆移動到指定的座標
ctx.lineTo(200, 50); //繪製一條從當前位置到指定座標(200, 50)的直線.
//閉合路徑。會拉一條從當前點到path起始點的直線。如果當前點與起始點重合，則什麼都不做
ctx.closePath();
ctx.stroke(); //繪製路徑。
}
draw();
// 繪製三角形邊框
function drawTriangle(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(60, 60);
ctx.lineTo(200, 60);
ctx.lineTo(200, 200);
ctx.closePath(); //雖然我們只繪製了兩條線段，但是closePath會closePath，仍然是一個3角形
ctx.stroke(); //描邊。stroke不會自動closePath()
}
drawTriangle();
// 填充三角形
function tianchong(){
var canvas = document.getElementById('tutorial');
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(60, 100);
ctx.lineTo(100, 100);
ctx.lineTo(100, 200);
ctx.fill(); //填充閉合區域。如果path沒有閉合，則fill()會自動閉合路徑。
}
tianchong();
/* 筆記
圖形的基本元素是路徑。
路徑是通過不同顏色和寬度的線段或曲線相連形成的不同形狀的點的集合。
一個路徑，甚至一個子路徑，都是閉合的。
使用路徑繪製圖形需要一些額外的步驟：
建立路徑起始點
呼叫繪製方法去繪製出路徑
把路徑封閉
一旦路徑生成，通過描邊或填充路徑區域來渲染圖形。
下面是需要用到的方法：
beginPath()
新建一條路徑，路徑一旦建立成功，圖形繪製命令被指向到路徑上生成路徑
moveTo(x, y)
把畫筆移動到指定的座標(x, y)。相當於設定路徑的起始點座標。
closePath()
閉合路徑之後，圖形繪製命令又重新指向到上下文中
stroke()
通過線條來繪製圖形輪廓
fill()
通過填充路徑的內容區域生成實心的圖形
*/
</script>
</body>
</html>