canvas繪製路徑

方法

beginpath()             建立乙個新的路徑

lineto() 描繪路徑
closepath() 沿著路徑畫直線，並且畫點移動到路徑開頭
stroke() 繪製形狀
fill() 填充形狀，會自動呼叫closepath方法

畫乙個實心六邊形

const canvas = document.getelementbyid('canvas');

const ctx = canvas.getcontext('2d');
ctx.beginpath();
ctx.moveto(50, 50);
ctx.lineto(100, 50);
ctx.lineto(130, 80);
ctx.lineto(100, 110);
ctx.lineto(50, 110);
ctx.lineto(20, 80);
ctx.fill();

畫乙個空心六邊形

ctx.beginpath();

ctx.moveto(50, 50);
ctx.lineto(100, 50);
ctx.lineto(130, 80);
ctx.lineto(100, 110);
ctx.lineto(50, 110);
ctx.lineto(20, 80);
ctx.closepath();
ctx.stroke();

posted @

2019-02-08 20:54

qz奔跑的馬 閱讀(

...)

編輯收藏

canvas路徑繪製

慣例，先貼 1 2 created by administrator on 2016 1 27.3 4 function draw id view code 解釋 此 會生成一條直線，乙個矩形，乙個圓形。這種路徑繪製方式分為三步 1 建立繪圖路徑 1 context.beginpath 2 cont...

canvas繪製矩形和路徑方式

一 繪製矩形 1.context.rect x,y,width,height 2.context.fillrect x,y,width,height 3.context.strokerect x,y,width,height 4.context.clearrect x,y,width,height ...

Canvas繪製基礎

繪製畫素點 canvas.drawpoint float x,float y,paint paint canvas.drawpoints float pts,paint paint canvas.drawpoints f float pts,int offset,int count,paint pa...