HTML5 canvas 繪製線條方法

用三個點畫一條折線

ctx.beginpath();

//設定筆觸的顏色

ctx.strokestyle="#0000ff";

//設定開始座標

ctx.moveto(0,0);

//設定中間座標

ctx.lineto(100,50);

//設定結束座標

ctx.lineto(200,60);

//繪製線條

ctx.stroke();

繪製一條虛線

var c=document.getelementbyid("mycanvas");

var ctx=c.getcontext("2d");

var xp = 4;//最小長度

var yp = 2;//最小長度

var beginx = 0;//開始橫座標

var beginy = 0;//開始縱座標

var beginz = 4;//開始第乙個點橫座標

var beginw = 2;//開始第乙個點縱座標

var times = 0;

drows(beginx,beginy,beginz,beginw);

function drows(x,y,z,w)else

drows(x,y,z,w);

}設定兩條線的轉角

var c=document.getelementbyid("mycanvas");

var ctx=c.getcontext("2d");

//重新開始一條路徑使顏色不互相影響

ctx.beginpath();

//設定筆觸的顏色

ctx.strokestyle="#0000ff";

//設定開始座標

ctx.moveto(0,0);

//設定結束座標

ctx.lineto(50,60);

//設定線條寬度

ctx.lineto(200,0);

ctx.linewidth=10;

ctx.linejoin="miter";

//繪製線條

ctx.stroke();

繪製乙個圓或者圓點

var c=document.getelementbyid("mycanvas");

var cxt=c.getcontext("2d");
cxt.fillstyle="#ff0000";
cxt.beginpath();
cxt.arc(70,18,15,0,math.pi*2,true);
cxt.closepath();
cxt.fill();

var c=document.getelementbyid("mycanvas");

var cxt=c.getcontext("2d");
cxt.fillstyle="#ff0000";
cxt.beginpath();
cxt.arc(70,18,15,0,math.pi*2,true);
cxt.closepath();
cxt.fill();

html5 Canvas繪製線條

function draw cxi.beginpath 初始化路徑繪製 cxi.moveto 75,50 將路徑的 起始點 座標確定 cxi.lineto 100,85 將另乙個 結點 座標確定 cxi.lineto 100,20 將另二個 結點 座標確定 這裡的結點可以理解成photoshop裡面...

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