const mycanvas = document.
getelementbyid
('mycanvas');
const ctx = mycanvas.
getcontext
('2d');
ctx.
moveto(0
,0);
ctx.
lineto
(100
,100);
ctx.
stroke()
;
moveto是移動，可以理解為移動畫筆。lineto則是從當前位置往指定位置畫一條直線。以上**的效果如下：
看起來沒啥問題，可是實際上，第一條直線被畫了兩次。
const mycanvas = document.
getelementbyid
('mycanvas');
const ctx = mycanvas.
getcontext
('2d');
ctx.
moveto(0
,0);
ctx.
lineto
(100
,100);
ctx.strokestyle =
'red'
;ctx.
stroke()
;ctx.
moveto
(100,0
);ctx.
lineto
(200
,200);
ctx.strokestyle =
'blue'
;cts.
stroke()
;
stroke方法將兩條線都畫了一遍，則兩條都是藍色。
原因是因為moveto、lineto這些操作都是對記憶體的操作而並沒有繪製到螢幕上，呼叫stroke方法的時候才真正的被繪製，因此記憶體中儲存著兩條線的路徑，因此在第二個stroke方法被呼叫時，第一條直線也被繪製了。
那怎麼解決這個問題呢？
const mycanvas = document.
getelementbyid
('mycanvas');
const ctx = mycanvas.
getcontext
('2d');
ctx.
moveto(0
,0);
ctx.
lineto
(100
,100);
ctx.strokestyle =
'red'
;cts.
stroke()
;ctx.
beginpath()
;//引入beginpath方法
ctx.
moveto
(100,0
);ctx.
lineto
(200
,200);
ctx.strokestyle =
'blue'
;cts.
stroke()
;
stroke方法之後呼叫beginpath方法即可。這個方法會清空之前儲存在記憶體中的路徑。
儘管可以通過畫線的方式畫矩形，但呼叫strokerect方法將會更為方便。
該方法接受4個引數，前兩個是所要畫的矩形左上角的座標，後兩個則分別是矩形的寬和高。
canvas直線 圓和正方形的畫法
var oca document.getelementbyid canvas var oev oca.getcontext 2d 設定繪圖環境 var w oca.width window.innerwidth var h oca.height window.innerheight 直線畫法 oev...
Canvas 繪製直線
1.canvas繪圖是一種基於狀態的繪圖，繪圖的過程應該是先設定繪圖的狀態，再呼叫具體的函式進行繪製。例如繪製一條 100,100 到 700,700 的直線 context.moveto 100,100 設定起點狀態 context.lineto 700,700 設定末端狀態 context.li...
canvas繪製線和矩形
canvas繪製矩形 html中的元素canvas只支援一種原生的圖形繪製 矩形。所有其他的圖形的繪製都至少需要生成一條路徑 1.繪製矩形 canvas提供了三種方法繪製矩形 繪製乙個填充的矩形 填充色預設為黑色 fillrect x,y,width,height 繪製乙個矩形的邊框 預設邊框為 一...