html5利用canvas圓形和多邊形程式碼例項

admin發表於2017-02-19
HTMLCanvas

本章節介紹一下如何利用html5的canvas來繪製各種形狀的圖形，因為這是在實際應用中是有使用的，也比較頻繁，下面就分享一下能夠實現此功能的程式碼，希望能夠給需要的朋友帶來幫助，程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript" charset = "utf-8"> 
//這個函式將在頁面完全載入後呼叫 
function pageLoaded(){ 
  //獲取canvas物件的引用,注意tCanvas名字必須和下面body裡面的id相同 
  var canvas = document.getElementById('tCanvas'); 
  //獲取該canvas的2D繪圖環境 
  var context = canvas.getContext('2d'); 
  //繪製程式碼將出現在這裡 
  //繪製複雜性豬 
  //填充三角形 
  context.beginPath(); 
  context.moveTo(10,120);//從(10,20開始) 
  context.lineTo(10,180);//表示從(10,120)開始，畫到(10,180)結束 
  context.lineTo(110,150);//表示從(10,180)開始，畫到(110,150)結束 
  context.fill();//閉合形狀並且以填充方式繪製出來 
  //三角形的外邊框 
  context.beginPath(); 
  context.moveTo(140,160);//從點(140,160)開始 
  context.lineTo(140,220); 
  context.lineTo(40,190); 
  context.closePath(); //關閉路徑 
  context.stroke(); //以空心填充 
  //一個複雜的多邊形 
  context.beginPath(); 
  context.moveTo(160,160);//從點(160,160)開始 
  context.lineTo(170,220); 
  context.lineTo(240,210); 
  context.lineTo(260,170); 
  context.lineTo(190,140); 
  context.closePath(); 
  context.stroke(); 
  //繪製弧 
  //繪製半圓弧 
  context.beginPath(); 
  //在(100,300)處逆時針畫一個半徑為40，角度從0到180°的弧線 
  context.arc(100,300,40,0*Math.PI,1*Math.PI,true); //PI的弧度是180° 
  context.stroke(); 
  //畫一個實心圓 
  context.beginPath(); 
  //在(100,300)處逆時針畫一個半徑為30，角度為0到360°的弧 
  context.arc(100,300,30,0*Math.PI,2*Math.PI,true);//2*Math.PI是360° 
  context.fill(); 
  //畫一個3/4弧 
  context.beginPath(); 
  //在(200,300)處順時針畫一個半徑為25，角度為0到270°的弧 
  context.arc(200,300,25,0*Math.PI,3/2*Math.PI,false); 
  context.stroke(); 
} 
window.onload=function(){
  pageLoaded();
}
</script> 
</head> 
<body> 
<canvas width="400" height="400" id="tCanvas">瀏覽器不支援</canvas> 
</body> 
</html>

相關文章