如何用canvas繪制一個多邊形
Canvas是HTML5在HTML4.0的基礎上增加的一個繪畫標簽。通過其提供的坐標定點，在網頁中我們可以做動畫、繪圖，無所不能及。下面就讓我們一起來動手吧？例：用canvas繪制一個多邊形
工具/材料
dw等代碼編輯軟件
操作方法
-
01
在網頁主體中定義一張畫布（大小，顏色等），在HTML5輸入JS代碼，加載網頁，并定義一只畫筆，以坐標（500，100）為起始點，到（400，200）的地方劃一條斜線：代碼如圖1
-
02
運行程序，在網頁中輸出一條斜線，結果如圖2
-
03
X軸保持不變（400），Y軸為（300）畫一條豎線，代碼如圖3
-
04
運行程序，結果如圖4
-
05
X軸變為（500），Y軸為（４００），添加一條斜線，代碼如圖５
-
06
運行程序，大家會發現，如圖６
-
07
X軸增大（１００），Y軸變為（５００），畫一條橫線，代碼如圖７
-
08
運行程序，結果如圖８
-
09
在X軸為（７００），Y軸為（300）的地方，劃一條斜線，代碼如圖9
-
10
運行程序，結果如圖10
-
11
X軸不變，畫一條高度為100的豎線，代碼如圖11
-
12
運行程序，結果如圖12
-
13
在X軸為（6００），Y軸為（100）的地方，畫一條長為100的斜線，代碼如圖13
-
14
運行程序，結果如圖14
-
15
關閉多邊形（closepath）的路徑，運行代碼（如圖15），怎么樣，心動了嗎？
- End
- 發表于 2017-10-30 00:00
- 閱讀 ( 730 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章