canvas繪製帶有漸變效果的直線

admin發表於2018-05-27
Canvas

本章節介紹一下canvas簡單的繪圖功能一個例項，它實現了繪製具有漸變效果的直線。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<style type="text/css">
canvas{
  border:dashed 2px #CCC
}
</style>
<script type="text/javascript">
function $$(id){
  return document.getElementById(id);
}
function pageLoad(){
  var can = $$('can');
  var cans = can.getContext('2d');
  cans.moveTo(0,0);
  cans.lineTo(400,300);
  var gnt1 = cans.createLinearGradient(0,0,400,300);
  gnt1.addColorStop(0,'red');
  gnt1.addColorStop(1,'yellow');
  cans.lineWidth=3;
  cans.strokeStyle = gnt1;
  cans.stroke();
}
window.onload=function(){
  pageLoad();
}
</script>
<body>
<canvas id="can" width="400px" height="300px"></canvas>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋：

（1）.function $$(id){  

  return document.getElementById(id);

}，模擬實現了類似於jQuery中的id選擇器功能。

（2）.function pageLoad(){}，此函式實現了繪製漸變效果直線的功能。

（3）.var can = $$('can')，獲取畫布元素物件。

（4）.var cans = can.getContext('2d')，建立一個繪畫環境。

（5）.cans.moveTo(0,0)，把繪畫路徑移動到畫布的（0,0）位置，也就是左上角。

（6）.cans.lineTo(400,300)，新增一個新的點，於是就可以建立點與點之間的線條（此方法不會建立線條）。

（7）.var gnt1 = cans.createLinearGradient(0,0,400,300)，建線性的漸變物件。

（8）.gnt1.addColorStop(0.5,'red')，規定漸變物件中的顏色和位置。

（9）.gnt1.addColorStop(1,'yellow')，和上面同樣的道理。

（10）.cans.lineWidth=3，設定線條的寬度。

（11）.cans.strokeStyle = gnt1，設定繪製的筆觸為漸變物件。

（12）.cans.stroke()，繪製已經定義的路徑。

二.相關閱讀：

（1）.getContext參閱canvas getContext()方法一章節。

（2）.moveTo()參閱canvas moveTo()一章節。

（3）.lineTo()參閱canvas lineTo()一章節。

（4）.createLinearGradient()參閱canvas createLinearGradient()一章節。

（5）.addColorStop()參閱canvas addColorStop()一章節。

相關文章