canvas透明度的矩形效果

admin發表於2018-03-22
Canvas

本章節介紹一下利用canvas繪製一個矩形，並且具有一定的透明度效果。

關於透明度可以參閱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.fillStyle = "red"; 
  //畫一個紅色的實心矩形 
  context.fillRect(50,50,100,40); 
  //設定邊線顏色為綠色 
  context.fillStyle = "green"; 
  //畫一個綠色空心矩形 
  context.strokeRect(120,100,100,35); 
  //使用rgb()設定填充顏色為藍色 
  context.fillStyle = "rgb(0,0,255)"; 
  //畫一個藍色的實心矩形 
  context.fillRect(80,230,100,40); 
  //設定填充色為黑色且alpha值(透明度)為0.2 
  context.fillStyle = "rgba(0,0,0,0.2)"; 
  //畫一個透明的黑色實心矩形 
  context.fillRect(300,180,100,50); 
} 
window.onload=function(){
  pageLoaded();
}
</script> 
</head> 
<body> 
<canvas width="400" height="400" id="tCanvas">瀏覽器不支援</canvas> 
</body> 
</html>

更多canvas教程可以參閱canvas教程版塊。

相關文章