1. 程式人生 > >canvas中2D畫線詳解

canvas中2D畫線詳解

   一、w3c裡面的程式碼和實現效果

    手冊的程式碼是這樣的

var c = document.getElementById('myCanvas');
var cxt = c.getContext("2d");
cxt.moveTo(10, 10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

html5的canvas繪製線條,moveTo和lineTo詳解    

實現的效果是這樣的

    二、詳細講解每一個步驟

    1,獲取id值為myCanvas的canvas標籤並賦值給c!(指定在哪裡畫)

    2,

c.getContext('2d');

    3,    手冊上說是返回一個用於在畫布上繪圖的環境,2d表示二維繪圖!(指定畫出的圖案的型別)

cxt.moveTo(10, 10);


html5的canvas繪製線條,moveTo和lineTo詳解    

指定義了一個起點,座標是(20,20)!這時候的起點如下圖

    4,

cxt.lineTo(150, 50);

    (1)新增一條直線,起點是第3步設定的(10, 10),終點現在設定的(150, 50)!    這有兩個功能:

    (2)設定新的起點為(150, 50),相當於又來了一句cxt.moveTo(150, 50);而這時候的起點如下圖

html5的canvas繪製線條,moveTo和lineTo詳解

    5,

cxt,lineTo(10, 50);

        跟上一條語句功能相同,這時候起點如下圖

html5的canvas繪製線條,moveTo和lineTo詳解

    6,

cxt.stroke();

    上面做了那麼多的事情但始終沒有在網頁上面畫出了,而這個語句就是將你以上所有做的事都在網頁上面呈現出來!所以如果你要測試線條或者圖案效果的話,一定不要忘了這一句,不然網頁上面是什麼都顯示不出啦的