使用canvas繪制圓形 HTML5的canvas繪圖和CSS3的繪圖哪個(gè)更有優(yōu)越性?
HTML5的canvas繪圖和CSS3的繪圖哪個(gè)更有優(yōu)越性?簡(jiǎn)單解釋?zhuān)篊SS更像是切割多個(gè)“矩形”(DIV),然后將它們拼接成一個(gè)圖案,然后給圖案上色。畫(huà)布從一個(gè)點(diǎn)開(kāi)始,延伸無(wú)數(shù)個(gè)點(diǎn)以得到一條線。在延
HTML5的canvas繪圖和CSS3的繪圖哪個(gè)更有優(yōu)越性?
簡(jiǎn)單解釋?zhuān)?/p>
CSS更像是切割多個(gè)“矩形”(DIV),然后將它們拼接成一個(gè)圖案,然后給圖案上色。
畫(huà)布從一個(gè)點(diǎn)開(kāi)始,延伸無(wú)數(shù)個(gè)點(diǎn)以得到一條線。在延長(zhǎng)線之后,它得到一個(gè)面(三角形、圓、矩形等),然后繪制線或面的顏色。
目前,CSS更像是兒童手冊(cè)類(lèi),canvas更像是用筆畫(huà)畫(huà),但畫(huà)圖更像是可以控制大小的矢量圖。
面對(duì)曲線和更復(fù)雜的圖形,canvas比CSS更有效。另外,畫(huà)布確定坐標(biāo)位置時(shí),更接近我們常用的數(shù)學(xué)思維方法。
我們只能膚淺地談。
如何使用html5中的canvas標(biāo)簽,畫(huà)一個(gè)圓及一個(gè)矩形?
首先,畫(huà)布需要響應(yīng)鼠標(biāo)事件(onmousedown等)
所有圖形必須創(chuàng)建相應(yīng)的對(duì)象以記錄其位置和大小,以及zorder(層疊位置,當(dāng)兩個(gè)對(duì)象重疊時(shí)確定誰(shuí)在頂部),并將相應(yīng)的對(duì)象放入數(shù)組中,按zorder
排序
當(dāng)畫(huà)布的鼠標(biāo)點(diǎn)擊事件被觸發(fā)時(shí),檢測(cè)鼠標(biāo)坐標(biāo)不在對(duì)象所在區(qū)域。如果是,則調(diào)用相應(yīng)的函數(shù)
HTML5 canvas元素,并使用JavaScript在網(wǎng)頁(yè)上繪制圖像。
畫(huà)布是一個(gè)矩形區(qū)域,您可以在其中控制每個(gè)像素。
Canvas有許多方法來(lái)繪制路徑、矩形、圓、字符和添加圖像。