canvas學習繪畫矩形

2022-07-25 09:15:09 字數 978 閱讀 3357

1.掌握繪製矩形的方法：strkerect()/fillrect()

2.掌握繪製路徑的beginpath()和closepath()

beginpath()用來建立新的路徑

closepath()從當前點回到起始點，封閉路徑 邊角無漏

context3.moveto(100,100);


context3.lineto(400,100);


context3.lineto(400,400);


context3.lineto(100,400);


context3.closepath();


context3.stroke();
3.rect(x,y,w,h)建立乙個矩形，strokerect(x,y,w,hx,y,w,h)繪製矩形（無填充）

strokerect(x,y,w,h)相當於rect(x,y,w,h)+stroke()

4.fillrect(x,y,w,h)繪製「被填充」的矩形，fill()繪製已定義的路徑（帶填充的圖形）


var c=canvas3.getcontext('2d');


c.beginpath();


c.linewidth=10;


c.strokestyle='green';


c.strokerect(100,100,100,100);


c.beginpath();


c.fillstyle='red';


c.rect(300,100,100,100);


c.fill();


c.beginpath();


c.fillstyle='black';


c.fillrect(100,300,100,100);


c.fillrect(300,300,100,100);
5.stroke()繪製已定義的路徑








 
Canvas繪製矩形
context.rect x y width height 規劃了矩形的路徑 context.fillrect x y width height 根據fillstyle繪製出乙個填充的矩形 context.strokerect x y width height 根據strokestyle繪製出乙個矩...


canvas基礎 矩形
上回我們了解了線條，由線 面，今天我們來說 矩形 畫矩形之前呢，我們先思考如何才能畫乙個矩形？很簡單，就是四條線段湊到一起，圍成乙個面，那麼我們在寫的時候是不是真的要畫四條直線呢？當然不要 確定初始位置，改變終點位置，三次就好。備註 一下我們畫圖形，都是按照順時針畫的喲。還是按照我們之前學畫直線的方...


canvas繪製矩形
1.繪製乙個填充的矩形 fillrect x,y,width,height 2.繪製乙個矩形的邊框 strokerect x,y,width,height 3.清除指定矩形區域，讓清除部分完全透明 clearrect x,y,width,height 其中x y是相對於畫布左上角0,0 的距離，wi...