html5 Canvas繪製線條

2022-04-08 13:39:37 字數 415 閱讀 8810

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...