function draw()
cxi.beginpath();初始化路徑繪製;cxi.moveto(75,50);將路徑的「起始點」座標確定;cxi.lineto(100,85);將另乙個「結點」座標確定;cxi.lineto(100,20);將另二個「結點」座標確定;(這裡的結點可以理解成photoshop裡面的路徑工具點出來的,結點)cxi.fill();將繪製的「起始點"、「第乙個結點」、「第二個結點」;一共三個點用直鏈結起來。形成乙個三角形;如下圖:
三角形左邊的乙個點是:cxi.moveto(75,50);
三角形上邊的乙個點是:cxi.lineto(100,20);
三角形下邊的乙個點是:cxi.lineto(100,85);
這裡的引數座標,都是相對於canvas元素的座標0.0.即左上角;
摘自 船長op
HTML5 canvas 繪製線條方法
用三個點畫一條折線 ctx.beginpath 設定筆觸的顏色 ctx.strokestyle 0000ff 設定開始座標 ctx.moveto 0,0 設定中間座標 ctx.lineto 100,50 設定結束座標 ctx.lineto 200,60 繪製線條 ctx.stroke 繪製一條虛線 ...
HTML5 canvas 繪製圓形
canvas繪製圓形的思路 1 建立路徑 beginpath 2 建立圓形的路徑 3 關閉路徑 closepath 路徑不關閉也能繪製出圖形 4 設定繪製樣式。建立圓形路徑時需要用到物件的arc方法,方法定義如 arc x,y,radius,startangle,endangle,countercl...
HTML5 Canvas繪製簡單形狀
使用canvas來進行繪畫,它像很多其他dom物件一樣,有很多屬性和方法,操作這些方法,實現繪畫 獲取canvas物件,呼叫document.getelementbyid 方法 呼叫canvas物件的getcontext 方法,獲取context物件,引數 string的 2d 繪製線段 呼叫con...