canvas學習總結

canvas的相容

獲取canvas寬高的兩種方法

api----繪製線條

什麼是『非0環繞』？

canvas繪圖中交叉路徑的填充問題，依據非零環繞原則，由順、逆時針穿插次數決定是否填充某一區域

非零環繞原理

判斷有自我交叉情況的路徑時，對於路徑中的任意給定區域，從該區域內部任意找乙個點作為起點，畫一條足夠長的線段，使此線段的終點完全落在路徑範圍之外。然後，初始化計數器為0，每當這條線段與路徑上的直線或曲線相交時，就改變計數器的值。如果是與路徑的順時針部分相交，則加1，如果是與路徑的逆時針部分相交，則減1。若計數器的最終值不是0，那麼此區域就在路徑裡面，在呼叫fill方法時，瀏覽器就會對其進行填充。如果最終值時0，那麼此區域就不在路徑內部，瀏覽器就不會對其進行填充

產生原因： 對齊的點是線的中心位置 會把線分成兩個0.5px，但是由於瀏覽器預設最小顯示寬度為1px，所以canvas顯示的是會不飽和增加寬度

解決方案： 將線條沿垂直於線條的方向向上或向下移動0.5px

linewidth 用於設定線條的寬度

linecap 用於設定線條兩端的形狀，butt 預設的平頭，square 方頭，round 圓頭

linejoin 用於設定線條拐點的形狀，miter 預設的尖拐點，bevel 像是被切了一刀的平拐點，round 圓拐點

setlinedash([5,10,15]) stroke之前設定這個屬性，可以繪製虛線，陣列中的引數分別於實線、空格的迴圈順序進行對應，設定其長度

getlinedash() 返回所繪製的虛線圖形的用於重複部分的影象，對應的長度陣列。如果 setlinedash([5,10,15]) 則返回陣列 [5,10,15,5,10,15]

linedashoffset 用於設定虛線的偏移量，如果是正的值則往後(繪製的起點方向)偏移，如果是負的值則往前(繪製的終點方向)偏移

api----矩形繪製

api----漸變顏色

createlineargradient(x0,y0,r0,x1,y1,r1) 建立乙個放射性的線性漸變物件，點(x0,y0)為圓心r0為半徑的地方開始漸變，到點(x1,y1)為圓心r1為半徑的地方結束漸變

createradialgradient(x0,y0,r0,x1,y1,r1) 建立乙個徑向漸變物件

api----繪製圓弧

ctx.moveto(x,y);

ctx.arc(x,y,r,startangle,stopangle,false);
ctx.closepath();
ctx.stroke();
ctx.fill();

api----繪製文字

api----繪製

var img=new image(); 或 var img=document.createelement("img");

img.onload=function()
img.src=src; // 必須要先繫結載入完成的事件，再設定的src屬性

api----變換座標軸及左上角的原點

變換座標軸及原點 — 只對在該變換之後繪製的圖形有效

canvas學習總結六 繪製矩形

在第三章中 canvas學習總結三 繪製路徑 線段 我們提高canvas繪圖環境中有些屬於立即繪製圖形方法，有些繪圖方法是基於路徑的。立即繪製圖形方法僅有兩個strokerect fillrect 兩個方法都是用來繪製矩形的。canvas的api提供了如下三個方法，分別用於矩形的清除，描邊與填充 我...

Canvas學習系列一 初識canvas

最近你開始在學習canvas，打算把學習canvas的整個學習過程當中的一些筆記與總結記錄下來，如有什麼不足之處還請大神們多多指出。1.canvas介紹 canvas元素的出現，可以說開啟的web世界繪製動畫，圖形的大門，其功能非常強大 canvas 元素是html5中功能最強大的元素，它的能力主要...

Canvas學習筆記 Canvas常用API方法

var canvas document.queryselector canvas var context canvas.getcontext 2d 之後的方法呼叫都是基於contextcontext.beginpath 開啟一條新的路徑。不一定要與closepath 配對，可以不關閉舊路徑直接開啟新...