canvas之2D上下文

1.填充和描邊

（1）fillstyle

（2）strokestyle

2.繪製矩形

（1）fillrect()

（2）strokerect()

（3）clearrect()   :清除畫布上的矩形區域

3.繪製路徑

（1）arc(x,y,radius,startangle,endangle,countercockwise) 

以（x,y）畫圓，radius為半徑，startangle：起始角度，endangle：結束角度，countercockwise：是否按逆時針方向轉動，false表示按逆時針轉動。

（2）arcto(x1,y1,x2,y2,radius)  

從（x1,y1）到（x2,y2）畫一條半徑為radius的弧線

（3）beziercurveto(c1x,c1y,c2x,c2y,x,y) 

貝塞爾曲線，詳細的看我的svg--貝塞爾曲線的部落格

（4）lineto(x,y) 

從上一點開始畫一條線到（x,y）

（5）moveto(x,y)

將繪圖游標移到（x,y）

（6）quadraticcurveto(cx,cy,x,y)  

繪製二次曲線到（x,y），以（cx,cy）作為控制點

（7）rect(x,y,width,height)

從(x,y)開始繪製乙個矩形

4.繪製文字

font: 文字樣式，大小，字型

textalign：文字對齊方式（start,end,left,right,center）

textbaseline ：文字的基線

ct.filltext("文字",100,20)：

5.變換

rotate(): 旋轉

scale()：縮放

translate(x,y) ：移動到（x,y）

transform()：

settransform()：

1

ct.beginpath();2//
外圓3 ct.arc(100,100,99,0, 2*math.pi ,false);4
5//內圓6 ct.moveto(194,100);
7 ct.arc(100,100,94,0, 2*math.pi ,false);8
9 ct.translate(100,100);
10//
旋轉11
這是旋轉90度後
6.繪製影象

陰影共四個屬性設定：

shadowcolor :陰影顏色

shadowblur ：模糊畫素數

shadowoffsetx ：陰影偏移量

shadowoffsety ：陰影偏移量

1

//設定陰影
2 ct.shadowcolor="rgba(0,0,0,0.5)";
3 ct.shadowblur = 4;
4 ct.shadowoffsetx = 5;
5 ct.shadowoffsety = 5;67
//紅色矩形
8 ct.fillstyle="#ff0000"
9 ct.fillrect(10,10,50,50);
1011
//藍色矩形
8.漸變
漸變由canvasgradient例項表示。
建立線性漸變：createlineargradient(x,y,_x,_y)
建立線性漸變：createradialgradient(x,y,radius,_x,_y,_radius)
(1)線性漸變：
1

//紅色矩形
2 ct.fillstyle="#ff0000"
3 ct.fillrect(10,10,50,50);45
//漸變色矩形
//用於更好定位的漸變函式
2function
createrectlineargradient(context,x,y,width,height)56
//漸變色矩形
7var gradient = createrectlineargradient(ct,30,30,50,50);
8 gradient.addcolorstop(0,"white");
9 gradient.addcolorstop(1,"black")
1011 ct.fillstyle=gradient;
12 ct.fillrect(30,30,50,50);
13 ct.stroke();
(2)徑向漸變：

前三個引數為起點圓的圓心和半徑，後三個引數為終點圓的圓心和半徑
1

//紅色矩形
2 ct.fillstyle="#ff0000"
3 ct.fillrect(10,10,50,50);45
6//徑向漸變
9.漸變
漸變由canvasgradient例項表示。
建立線性漸變：createlineargradient(x,y,_x,_y)
建立線性漸變：createradialgradient(x,y,radius,_x,_y,_radius)
(1)線性漸變：
 
獲取canvas上下文報錯問題
在用html5的canvas寫乙個五子棋遊戲時，發現在js 中context chess.getcontext 2d 一直報null錯誤。觀察js 並沒有什麼錯誤，null空值錯誤，表示並沒有找到canvas的上下文，此時應該看html中的js引入的位置是在canvas標籤前還是後面，在前面就會報上...
flask 核心 之 應用上下文 及 請求上下文
werkzeugs 是 flask 的底層wsgi庫。def dispath request self,request return response hello world request request environ response self.dispath request request ...
python之with上下文管理
finally塊由於是否發生異常都會執行，通常是釋放資源的 可以通過with上下文管理，更方便的實現釋放資源的操作。with上下文管理的語法結構 with context expr as var 語句塊with上下文管理可以自動管理資源，在with 塊執行完後自動還原進入 之前的現場或上下文。cod...