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"> 
//這個函式將在頁面完全載入後呼叫 
function pageLoaded(){ 
  //獲取canvas物件的引用,注意tCanvas名字必須和下面body裡面的id相同 
  var canvas = document.getElementById('tCanvas'); 
  //獲取該canvas的2D繪圖環境 
  var context = canvas.getContext('2d'); 
  //繪製程式碼將出現在這裡 
  //實心矩形 
  //在點(200,10)處繪製一個寬和高均為100畫素的實心正方形 
  context.fillRect(200,10,100,100); 
  //在點(50,70)處繪製一個寬90畫素、高30畫素的實心矩形 
  context.fillRect(50,70,90,30); 
  //空心矩形（矩形邊框） 
  //在點(110,10)處繪製一個寬和高均為50畫素的正方形邊框 
  context.strokeRect(110,10,50,50); 
  //在點(30,10)處繪製一個寬和高均為50畫素的正方形邊框 
  context.strokeRect(30,10,50,50); 
  //清除矩形區域 
  //清除點(210,20)處寬30畫素、高20畫素的矩形區域 
  context.clearRect(210,20,30,20); 
  //清除點(260,20)處寬30畫素、高20畫素的矩形區域 
  context.clearRect(260,20,30,20); 
} 
window.onload=function(){
  pageLoaded();
}
</script> 
</head> 
<body> 
<canvas width="400" height="200" id="tCanvas">瀏覽器不支援</canvas> 
</body> 
</html>

相關文章