Canvas 繪製直線

2021-08-14 18:56:10 字數 2731 閱讀 8894

1.canvas繪圖是一種基於狀態的繪圖，繪圖的過程應該是先設定繪圖的狀態，再呼叫具體的函式進行繪製。

例如繪製一條（100,100）到（700,700）的直線：

context.moveto (100,100);       //設定起點狀態


context.lineto (700,700); //設定末端狀態


context.linewidth = 5


; //設定線寬狀態


context.strokestyle = 「#222」 ; //設定線的顏色狀態


context.stroke(); //進行繪製
2.當我們要繪製兩條有不同顏色的折線時:

window.onload = function()
上述**並不能達到效果，這是由於canvas是基於狀態的，在每一次進行繪製的時候，canvas不是簡單的將上一段**進行繪製，而是檢查在整個程式中設定的所有狀態，基於這些狀態完成一次繪製。所以context.strokestyle = "green"會覆蓋前面的context.strokestyle = "red"，最終兩個箭頭都是綠色的，如果我們要實現不同狀態的繪製可以使用context.beginpath()，context.beginpath()宣告從現在開始進行一段新的繪製。當使用context.beginpath()後，在指定新的路徑，再呼叫新的繪製函式將會採用context.beginpath()之後設定的新的狀態來進行繪製：

context.beginpath();


context.moveto(100,200);


context.lineto(300,400);


context.lineto(100,600);


context.linewidth = 10


; context.strokestyle = "red"


; context.stroke();


context.beginpath();


context.moveto(300,200);


context.lineto(500,400);


context.lineto(300,600);


context.linewidth = 10


; context.strokestyle = "green"


; context.stroke();
3.當我們要繪製乙個封閉的圖形時，可以通過設定點的狀態來描繪，例如：

context.moveto(100,350);


context.lineto(500,350);


context.lineto(500,200);


context.lineto(700,400);


context.lineto(500,600);


context.lineto(500,450);


context.lineto(100,450);


context.lineto(100,350);


context.linewidth = 10


; context.fillstyle = "rgb(2,33,42)"


; //指定填充顏色


context.fill(); //對多邊形進行填充


context.strokestyle = "blue"


; context.stroke();
但這樣寫有時候會出現一些瑕疵，比如說上面**描繪的封閉圖形由於border寬為10px，因此最後繪製出來的圖形會缺個角

另一種方式是將整個圖形的路徑放在context.beginpath()和context.closepath()之中，這樣就可以避免上述問題，canvas會自動幫我們解決上述問題。

context.beginpath();


context.moveto(100,350);


context.lineto(500,350);


...context.closepath();
context.beginpath()和context.closepath()可以將多個路徑分開，只要在每個路徑的首尾使用context.beginpath()和context.closepath()。當我們繪製乙個非封閉的圖形時使用context.closepath()，它會將圖形的首尾用一條線連線起來形成乙個封閉的圖形。context.beginpath()和context.closepath()不一定要成對出現，context.beginpath()表示要開始規劃乙個新的路徑，context.closepath()代表要結束當前的路徑，如果當前的路徑沒有封閉上的話會自動讓它封閉上。context.beginpath()和context.closepath()是繪製封閉多邊形的標準做法。

4.當我們要繪製乙個有填充顏色且有描邊的圖案時，應該先填充顏色（context.fill()）再描邊（context.stroke()），否則，填充色會覆蓋線條邊框內側，導致描邊的線條寬度看起來變小了。

直線繪製演算法

點在計算機中是組成圖形的最基本元素，我們幾何基本圖形的繪製是乙個個畫素點按照一定規則排列而成的組成的。而複雜的圖形是有基本幾何圖形組成的。所以基本圖形的繪製演算法，是學習計算機圖形學的基礎和關鍵。基本圖形包括 直線，矩形,三角形 直線是圖形中最常見的，在解析幾何中，二維座標系中的直線的表示式是 y ...

Canvas繪製基礎

繪製畫素點 canvas.drawpoint float x,float y,paint paint canvas.drawpoints float pts,paint paint canvas.drawpoints f float pts,int offset,int count,paint pa...

Canvas 繪製文字

filltext text，x,y maxwidth 填充文字 stroketext text，x,y maxwidth 描邊文字 font font 10px sans serif 預設 text anchor start 預設，文字對齊界線開始的地方 左對齊指本地從左向右，右對齊指本地從右向左 ...