javascript 動態方法的使用

　　今天在學習canvas的時候，意外發現了一個新鮮玩意，叫動態方法。

　　在此以前只知道動態屬性，這個相信你們都遇到或使用過：

let style = "color"

obj[style] = "red"

　　上述代碼會被解析爲：

obj.color = 「red」

　　

 

　　今天要講的是動態方法。咱們都知道canvas沒有提供畫虛線的api，但咱們能夠經過擴展函數來實現：

function drawDashedLine(context, x1, y1, x2, y2, dashLength) {
   dashLength = dashLength === undefined ? 5 : dashLength; //默認爲5

   var deltaX = x2 - x1;
   var deltaY = y2 - y1;
  //計算所需分線段數
   var numDashes = Math.floor(
       Math.sqrt(deltaX * deltaX + deltaY * deltaY) / dashLength);

   for (var i=0; i < numDashes; ++i) {
      context[ i % 2 === 0 ? 'moveTo' : 'lineTo' ] (x1 + (deltaX / numDashes) * i, y1 + (deltaY / numDashes) * i);
   }

   context.stroke();
};

　　先了解下函數的各參數，「context」指canvasRenderingContext2D， 「x1, y1, x2, y2」指要繪製的虛線的起點終點， 'dashLength' 指虛線分線段的長度。 

　　在計算出分線段數後，咱們的需求是，讓context依次畫出分線段。畫線段就涉及到'moveTo'與'lineTo'兩個api，在每分線段起點調用'moveTo'方法， 終點調用'lineTo'方法，

因而咱們經過for循環來實現這一功能：

for (var i=0; i < numDashes; ++i) {
      context[ i % 2 === 0 ? 'moveTo' : 'lineTo' ]
         (x1 + (deltaX / numDashes) * i, y1 + (deltaY / numDashes) * i);
   }

其中， context[ i % 2 === 0 ? 'moveTo' : 'lineTo' ] (x1 + (deltaX / numDashes) * i, y1 + (deltaY / numDashes) * i); } 就是所謂的動態方法了。

　　動態方法的基本結構是：

obj[dynamic](args)

其中[]內的dynamic變量能夠是字符串變量，也能夠是表達式（如：dynamic = "font" + "Size"），或是三目運算符，實際上上述例子中就是運用了三目運算符。