Canvas beginPath()、moveTo()、 lineTo() 、stroke() 繪製直線路徑
阿新 • • 發佈：2018-12-07
目錄
beginPath() 方法
beginPath() 方法開始一條路徑，或重置當前的路徑。
提示：請使用這些方法來建立路徑：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。
提示：請使用 stroke() 方法在畫布上繪製確切的路徑。
JavaScript 語法：context.beginPath()；
w3c 參考例子：http://www.w3school.com.cn/tags/canvas_beginpath.asp
moveTo() 方法
moveTo() 方法把路徑移動到畫布中的指定點，不建立線條。
提示：請使用 stroke() 方法在畫布上繪製確切的路徑。
JavaScript 語法：context.moveTo(x,y);
| 引數 | 描述 |
|---|---|
| x | 路徑的目標位置的 x 座標。 |
| y | 路徑的目標位置的 y 座標。 |
w3c 參考例子： http://www.w3school.com.cn/tags/canvas_moveto.asp
lineTo() 方法
lineTo() 方法新增一個新點，然後建立從該點到畫布中最後指定點的線條（該方法並不會建立線條）。
提示：請使用 stroke() 方法在畫布上繪製確切的路徑。
JavaScript 語法：context.lineTo(x,y);
| 引數 | 描述 |
|---|---|
| x | 路徑的目標位置的 x 座標。 |
| y | 路徑的目標位置的 y 座標。 |
菜鳥教程：http://www.runoob.com/tags/canvas-lineto.html
stroke() 方法
stroke() 方法會實際地繪製出通過 moveTo() 和 lineTo() 方法定義的路徑。預設顏色是黑色。
提示：請使用 strokeStyle 屬性來繪製另一種顏色/漸變。
JavaScript 語法：context.stroke();
菜鳥教程：http://www.runoob.com/tags/canvas-stroke.html
編碼示例
極速梯子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title></title>
<style type="text/css">
#myCanvas {
border-left: 1px solid #9A9990;
border-right: 1px solid #9A9990;
}
</style>
<!-- JQuery CDN-->
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
/**以下設定為全域性變數
* speed：速度，單位畫素
* singleWidth：單次運動線長，與畫布等長
* singleHeight：單次運動線高
* lineNum：繪製的橫線數目
* time：幀動畫請求id，用於停止動畫
*/
let speed = 3;
let singleWidth = 300, singleHeight = 40;
let lineNum;
let time = 0;
/**
* 極速梯子動畫
* @param canvas ：畫布
* @param ctx ：畫布上下文
* @param currentWidth ：動畫終端當前 x 座標
* @param currentHeight ：動畫終端當前 y 座標
* @param flag ：0 表示向下，-1 表示向左，1 表示向右
* @param index : 向下移動的次數，從 1 開始
*/
let show = function (canvas, ctx, currentWidth, currentHeight, flag, index) {
switch (flag) {
/** 向左移動*/
case -1:
if (currentWidth > 0) {
currentWidth -= speed;
} else {
flag = 0;
}
break;
/**向下移動*/
case 0:
if (currentHeight < index * singleHeight) {
currentHeight += speed;
} else {
/**如果當前繪製了3條橫線，且一共只要繪製3條時，則繼續往下繪製一根*/
if (index == 4 && lineNum == 3) {
flag = 0;
} else {
flag = currentWidth <= 0 ? 1 : -1;
}
index++;
}
/**如果運動到底部距離5畫素，則停止動畫*/
if (currentHeight >= canvas.height - 5) {
return;
}
break;
/**向右移動*/
case 1:
if (currentWidth < singleWidth) {
currentWidth += speed;
} else {
flag = 0;
}
break;
}
/**新增一個新點，然後在畫布中建立從該點到最後指定點的線條（該方法並不會建立線條）
* 最後繪製已定義的路徑*/
ctx.lineTo(currentWidth, currentHeight);
ctx.stroke();
/**開啟幀動畫回撥*/
time = requestAnimationFrame(function () {
show(canvas, ctx, currentWidth, currentHeight, flag, index);
});
};
$(function () {
/**
* 獲取畫布以及畫布上下文物件
* @type {Element}
*/
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
/**"執行"按鈕點選事件*/
$("button").click(function () {
/**先停止原來的幀動畫*/
window.cancelAnimationFrame(time);
/**情況畫布內的所有舊畫素點*/
ctx.clearRect(0, 0, canvas.width, canvas.height);
/**beginPath：開始一條路徑，或重置當前的路徑*/
ctx.beginPath();
/**
* lineWidth：設定或返回當前線條的寬度，以畫素計。
* lineCap：屬性設定或返回線條末端線帽的樣式。round 表示圓角
*/
ctx.lineWidth = 10;
ctx.lineCap = "round";
/**獲取使用者引數值*/
var start = $("input[name='start']:checked").val();
lineNum = $("input[name='lineNum']:checked").val();
/**初始化起點 x 座標*/
var initX = start == 1 ? 0 : 300;
/**把路徑移動到畫布中的指定點，不建立線條，設定起點*/
ctx.moveTo(initX, 0);
/**呼叫方法實現動畫*/
show(canvas, ctx, initX, 0, 0, 1);
});
});
</script>
</head>
<body>
<canvas id="myCanvas" width="300" height="200">
Your browser does not support the HTML5 canvas tag.
</canvas>
<br>
起點：<label><input type="radio" name="start" value="1" checked>左</label><label><input type="radio" name="start"
value="2">右</label><br>
線數：<label><input type="radio" name="lineNum" value="3" checked>3</label><label><input type="radio" name="lineNum"
value="4">4</label><br><br>
<button type="button">執行</button>
</body>
</html>