圖文詳解如何用html5 canvas畫一條直線
- yulia原創
- 2018-10-24 17:14:136640瀏覽
首先介紹用canvas繪製直線需要用到的屬性
moveTo(x,y) 可以設定線條開始位置的座標
lineTo(x,y) 可以設定線條結束位置的座標
lineWidth可以設定線條的寬度
strokeStyle 可以設定線條的顏色
用canvas繪製直線，步驟詳解：
1、用
2、用var c=document.getElementById("myCanvas")取得canvas元素
3、透過var ctx=c.getContext("2d")建立一個context 物件
4、設定直線的起點和終點，開始位置moveTo(25,25) ，結束位置lineTo(175,175)
5、可以用ctx.lineWidth = 5設定線條的寬度，ctx.strokeStyle = "red"設定線條的顏色
6、最後用ctx.stroke()畫一條直線，就完成了
具體程式碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="myCanvas" width="200px" height="200px" style="border: 1px solid #000000;"></canvas>
</body>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(25,25);
ctx.lineTo(175,175);
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.stroke();
</script>
</html>效果圖：
以上給大家介紹如何用canvas畫一條直線，是canvas中最簡單的部分，初學者一定要自己動手嘗試，看看你能不能寫出這樣的效果，希望這篇文章對你有幫助！
【相關教學推薦】
1. Html5影片教學
2. JavaScript影片教學
3. bootstrap教程
以上是圖文詳解如何用html5 canvas畫一條直線的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn