canvas中2D畫線詳解
阿新 • • 發佈:2019-02-11
一、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();
實現的效果是這樣的
二、詳細講解每一個步驟
1,獲取id值為myCanvas的canvas標籤並賦值給c!(指定在哪裡畫)
2,
c.getContext('2d');
3, 手冊上說是返回一個用於在畫布上繪圖的環境,2d表示二維繪圖!(指定畫出的圖案的型別)
cxt.moveTo(10, 10);
指定義了一個起點,座標是(20,20)!這時候的起點如下圖
4,
cxt.lineTo(150, 50);
(1)新增一條直線,起點是第3步設定的(10, 10),終點現在設定的(150, 50)! 這有兩個功能:
(2)設定新的起點為(150, 50),相當於又來了一句cxt.moveTo(150, 50);而這時候的起點如下圖
5,
cxt,lineTo(10, 50);
跟上一條語句功能相同,這時候起點如下圖
6,
cxt.stroke();
上面做了那麼多的事情但始終沒有在網頁上面畫出了,而這個語句就是將你以上所有做的事都在網頁上面呈現出來!所以如果你要測試線條或者圖案效果的話,一定不要忘了這一句,不然網頁上面是什麼都顯示不出啦的