<canvas></canvas>是HTML5中新增的標(biāo)簽,用于繪制圖形,實(shí)際上,這個(gè)標(biāo)簽和其他的標(biāo)簽一樣,其特殊之處在于該標(biāo)簽可以獲取一個(gè)CanvasRenderingContext2D對(duì)象,我們可以通過(guò)JavaScript腳本來(lái)控制該對(duì)象進(jìn)行繪圖。
<canvas></canvas>只是一個(gè)繪制圖形的容器,除了id、class、style等屬性外,還有height和width屬性。在<canvas>>元素上繪圖主要有三步:
1.獲取<canvas>元素對(duì)應(yīng)的DOM對(duì)象,這是一個(gè)Canvas對(duì)象;
2.調(diào)用Canvas對(duì)象的getContext()方法,得到一個(gè)CanvasRenderingContext2D對(duì)象;
3.調(diào)用CanvasRenderingContext2D對(duì)象進(jìn)行繪圖。
通過(guò)對(duì)五角星分析,我們可以確定各個(gè)頂點(diǎn)坐標(biāo)的規(guī)律,這里需要注意的一點(diǎn)是:在canvas中,Y軸的方向是向下的。

相應(yīng)代碼如下:
新聞熱點(diǎn)
疑難解答
圖片精選