canvas繪製線條（五）
阿新 • • 發佈：2018-12-12
畫線條：
繪製線條，其實是繪製路徑！
一條線段，需要一個起始點和一個終點，
由此需要一個設定起始點的函式和一個設定終點的函式
函式如下
context.moveTo(x,y)
引數x,y表示起始位置座標
context.lineTo(x,y)
引數x，y表示終點位置座標光寫這2個沒用，至於為什麼，不要問，這是規定，你需要在開始畫前，呼叫開始函式
context.beginPath();
意思就是我要開始畫線了（Path單詞就知道是畫路徑）
結束也要呼叫函式
context.closePath();
意思就是路徑的引數我都配置好了最後還需要呼叫函式把他畫出來
context.stroke();
意思就是把上面引數的輪廓畫出來這樣就畫出來了
程式碼如下：
<!DOCTYPE html> <!-- 告訴瀏覽器我們使用的HTML模板為HTML5 --> <html lang="en"> <!-- 網頁頁面的根，其他元素均放在其中，只能有一個 --> <head> <!--頁面所有meta元素均包含在這裡 --> <meta charset="UTF-8"> <!-- 編碼方式 --> <title>Canves高速入門</title> <!-- 頁面設定名稱，顯示在瀏覽器標題欄中 --> <!-- CSS 及 javascript 程式碼放置處 --> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <!-- 引用jQuery庫--> <script type="text/javascript"> $(document).ready(function(){ //alert("HELLO WORLD!!!") var canvas = $("#mycanvas"); var context = canvas.get(0).getContext("2d"); context.beginPath(); context.moveTo(10,10); context.lineTo(200,400); context.closePath(); context.stroke(); }); </script> </head> <body> <!-- 頁面的主題內容均在這裡 --> <canvas width="500" height="500" id="mycanvas" style="background-color: #113344"></canvas> </body> </html>
效果圖：
改變顏色
在繪畫前插入以下函式
context.strokeStyle="#23ada1";
程式碼如下：
<script type="text/javascript"> $(document).ready(function(){ //alert("HELLO WORLD!!!") var canvas = $("#mycanvas"); var context = canvas.get(0).getContext("2d"); context.strokeStyle="#23ada1"; context.beginPath(); context.moveTo(10,10); context.lineTo(200,400); context.closePath(); context.stroke(); }); </script>
效果圖：
改變線條粗細
在繪畫前插入以下函式
context.lineWidth=20;
程式碼如下：
<script type="text/javascript">
$(document).ready(function(){
//alert("HELLO WORLD!!!")
var canvas = $("#mycanvas");
var context = canvas.get(0).getContext("2d");
context.strokeStyle = "#23ada1";
context.lineWidth = 20;
context.beginPath();
context.moveTo(10,10);
context.lineTo(200,400);
context.closePath();
context.stroke();
});
</script>
效果圖：
