使用html5實現的繪製直線效果

admin發表於2017-02-17
HTML
本章節分享一段最為簡單的對canvas的利用，使用它繪製簡單直線效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<body > 
<canvas id="myCanvas" width="400px" height="300px"> 
您的瀏覽器不支援canvas標籤。 
</canvas> 
<script type="text/javascript"> 
//獲取Canvas物件(畫布) 
var canvas = document.getElementById("myCanvas"); 
//簡單地檢測當前瀏覽器是否支援Canvas物件，以免在一些不支援html5的瀏覽器中提示語法錯誤 
if(canvas.getContext){ 
  //獲取對應的CanvasRenderingContext2D物件(畫筆) 
  var ctx = canvas.getContext("2d"); 
  //線條的顏色 
  ctx.strokeStyle="#FF9933"; 
  //線條的寬度畫素 
  ctx.lineWidth=10; 
  //線條的兩關形狀 
  ctx.lineCap="round"; 
  //注意，Canvas的座標系是：Canvas畫布的左上角為原點(0,0)，向右為橫座標，向下為縱座標，單位是畫素(px)。 
  //開始一個新的繪製路徑 
  ctx.beginPath(); 
  //定義直線的起點座標為(10,10) 
  ctx.moveTo(50, 50); 
  //定義直線的終點座標為(50,10) 
  ctx.lineTo(350, 250); 
  ctx.moveTo(50, 240); 
  ctx.lineTo(360, 60); 
  ctx.moveTo(50, 200); 
  ctx.lineTo(300, 40); 
  //沿著座標點順序的路徑繪製直線 
  ctx.stroke(); 
  //關閉當前的繪製路徑 
  ctx.closePath(); 
} 
</script> 
</body> 
</html>

相關文章