canvas相關屬性使用

2022-09-20 01:06:13 字數 1103 閱讀 1396

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()的方法,對圓進行壓縮,達到畫橢圓的目的。

技巧就在先s**e儲存畫布狀態,然後縮放、呼叫路徑指令,再restore恢復畫布狀態,再stroke繪製出來。

關鍵點是先s**e後縮放,先restore後stroke.

//

------------均勻壓縮法繪製橢圓--------------------

function

evencompellipse(context, x, y, a, b)

;

//------------均勻壓縮法繪製橢圓--------------------

//其方法是用arc方法繪製圓,結合scale進行

//橫軸或縱軸方向縮放(均勻壓縮)

//這種方法繪製的橢圓的邊離長軸端越近越粗,長軸端點的線寬是正常值

//邊離短軸越近、橢圓越扁越細,甚至產生間斷,這是scale導致的結果

//這種缺點某些時候是優點,比如在表現環的立體效果(行星光環)時

//對於引數a或b為0的情況,這種方法不適用

function

evencompellipse(context,x

,y,a

,b);

canvas相關(漸變 陰影 path)

1 setshader paint物件的setshader函式,我的感覺是設定一種方式來填充圖形。可以設定為漸變,如下 paint paint new paint 定義乙個paint shader mshader new lineargradient 0,0,40,60,new int null,s...

canvas 相關基礎彙總簡記

2.通過 判斷canvas的.getcontext 屬性是否存在,作為瀏覽器不支援canvas的判斷 getcontext 是乙個方法,或者說是乙個函式,canvas通過這個函式獲取canvas的繪圖環境 以下面的 為例,我們通過 document.getelementbyid 獲取canvas物件...

canvas 03 動畫相關

settimeout fn,time 和setinterval fn,time 優點 使用方便,動畫的時間間隔可以自定義。缺點 隱藏瀏覽器標籤後,會依舊執行,造成資源浪費。與瀏覽器重新整理頻率不同步。requestanimationframe fn 優點 效能更優良。隱藏瀏覽器標籤後,便不會執行。與...