canvas繪制線條時如何設置起點坐標

canvas是html5尺度頂用于繪制圖形的標簽，當然也瀏覽器為了撐持這個標簽，也供給了良多的js方式供利用，本文就為你介紹canvas若何繪制線條，若何設置起點坐標

東西/原料

1
打開vscode，新建一個html文件，在文件中輸入一個感慨號，再按一下tab鍵，就能快速完當作html5規范的文檔布局（利用文本文件編纂也是一樣的結果）
2
在body規模內添加一個canvas標簽，設置寬高與邊框。在瀏覽器中運行可以看到，canvas標簽中心的文字并沒有顯示在瀏覽器中，這個文字是當瀏覽器不撐持canvas的時辰顯示的
3
在頁面中添加js代碼，獲取頁面canvas標簽對象，再判定當瀏覽器撐持canvas標簽時，獲取canvas繪制2d，即平面圖形的對象
4
在js中繼續添加繪圖代碼，從canvas左上角（0，0）坐標起頭，到（150，150）坐標之間的直線。
注重：moveTo(0, 0)的意思就是設置畫線的起點坐標
5
在瀏覽器中運行頁面，就可以看到canvas規模內呈現了一條從左上角起頭的直線
6
點竄moveTo(0, 0)，釀成從左上角起頭(50, 50)的位置為起點坐標，其他代碼都不點竄
7
再次打開瀏覽器，運行可以看到canvas圖形中的起點，距離左上角有橫標的目的50，縱標的目的50的偏移了