canvas相關屬性使用

1.canvas按百分比畫圓環

能夠使用canvas的arc屬性畫出圓環，百分比部分換算成弧度便可。

2.canvas的font屬性無法單獨設置，必須設置兩個及以上相關屬性。

若是要經過傳入的值來改變font屬性的參數，能夠經過正則匹配表達式，replace方法來實現，

如改變字號：

　　context.font = "italic 12px/20px arial";
　　context.font = context.font.replace(/\d+(\.\d+)?(px|pt|em|%)/i,"17px");//替換字體大小
　　context.font = context.font.replace(/(\/\s*)\d+(\.\d+)?(px|pt|em|%)/i,"$1"+"27px");//替換Line高度

 

3.canvas畫橢圓

　　canvas沒有提供直接畫橢圓的方法，能夠經過scale()的方法，對圓進行壓縮，達到畫橢圓的目的。

　   技巧就在先save保存畫布狀態，而後縮放、調用路徑指令，再restore恢復畫布狀態，再stroke繪製出來。

       關鍵點是先save後縮放，先restore後stroke.

//------------均勻壓縮法繪製橢圓-------------------- function EvenCompEllipse(context, x, y, a, b) { context.save(); //選擇a、b中的較大者做爲arc方法的半徑參數 var r = (a > b) ? a : b; var ratioX = a / r; //橫軸縮放比率 var ratioY = b / r; //縱軸縮放比率 context.scale(ratioX, ratioY); //進行縮放（均勻壓縮）  context.beginPath(); //從橢圓的左端點開始逆時針繪製 context.moveTo((x + a) / ratioX, y / ratioY); context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI); context.closePath();
　　context.restore();
　　context.stroke(); };

 

 

均勻壓縮法

    這種方法利用了數學中的均勻壓縮原理將圓進行均勻壓縮爲橢圓，理論上爲可以獲得標準的橢圓.下面的代碼會出現線寬不一致的問題，解決辦法看5樓simonleung的評論。

 

//------------均勻壓縮法繪製橢圓--------------------
//其方法是用arc方法繪製圓，結合scale進行
//橫軸或縱軸方向縮放（均勻壓縮）
//這種方法繪製的橢圓的邊離長軸端越近越粗，長軸端點的線寬是正常值
//邊離短軸越近、橢圓越扁越細，甚至產生間斷，這是scale致使的結果
//這種缺點某些時候是優勢，好比在表現環的立體效果（行星光環）時
//對於參數a或b爲0的狀況，這種方法不適用
function EvenCompEllipse(context, x, y, a, b)
{
   context.save();
   //選擇a、b中的較大者做爲arc方法的半徑參數
   var r = (a > b) ? a : b; 
   var ratioX = a / r; //橫軸縮放比率
   var ratioY = b / r; //縱軸縮放比率
   context.scale(ratioX, ratioY); //進行縮放（均勻壓縮）
   context.beginPath();
   //從橢圓的左端點開始逆時針繪製
   context.moveTo((x + a) / ratioX, y / ratioY);
   context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI);
   context.closePath();
   context.stroke();
   context.restore();
};