如何使用html5中的canvas標(biāo)簽，畫一個(gè)圓及一個(gè)矩形？首先，畫布需要響應(yīng)鼠標(biāo)事件（onmousedown等）所有圖形必須創(chuàng)建相應(yīng)的對(duì)象來(lái)記錄它們的位置和大小，以及zorder（層疊位置，當(dāng)兩個(gè)對(duì)

如何使用html5中的canvas標(biāo)簽，畫一個(gè)圓及一個(gè)矩形？

首先，畫布需要響應(yīng)鼠標(biāo)事件（onmousedown等）

所有圖形必須創(chuàng)建相應(yīng)的對(duì)象來(lái)記錄它們的位置和大小，以及zorder（層疊位置，當(dāng)兩個(gè)對(duì)象重疊時(shí)確定誰(shuí)在頂部），并將相應(yīng)的對(duì)象放入數(shù)組中，按zorder排序

當(dāng)畫布的鼠標(biāo)點(diǎn)擊事件被觸發(fā)時(shí)，按zorder順序檢測(cè)鼠標(biāo)坐標(biāo)不在對(duì)象所在區(qū)域。如果是，請(qǐng)調(diào)用相應(yīng)的函數(shù)

進(jìn)行簡(jiǎn)要說(shuō)明：

CSS更像是剪切多個(gè)“矩形”（DIV），然后將它們拼接成一個(gè)圖案，然后對(duì)圖案進(jìn)行著色。

畫布從一個(gè)點(diǎn)開始，延伸無(wú)數(shù)個(gè)點(diǎn)以得到一條線。在延長(zhǎng)線之后，它得到一個(gè)面（三角形、圓、矩形等），然后繪制線或面的顏色。

目前，CSS更像是兒童手冊(cè)類，canvas更像是用筆畫畫，但畫圖更像是可以控制大小的矢量圖。

面對(duì)曲線和更復(fù)雜的圖形，canvas比CSS更有效。另外，畫布確定坐標(biāo)位置時(shí)，更接近我們常用的數(shù)學(xué)思維方法。

我們只能膚淺地談。

HTML5的canvas繪圖和CSS3的繪圖哪個(gè)更有優(yōu)越性？

HTML5<canvas>元素用于繪制圖形，這是通過(guò)腳本（通常是JavaScript）完成的。

<canvas>標(biāo)記只是一個(gè)圖形容器，您必須使用腳本來(lái)繪制圖形。

您可以使用畫布以多種方式繪制路徑、方框、圓、字符和添加圖像。

創(chuàng)建畫布

畫布是網(wǎng)頁(yè)中的矩形框，通過(guò)<canvas>元素繪制。

注意：默認(rèn)情況下，<canvas>元素沒(méi)有邊框或內(nèi)容。

<canvas>的一個(gè)簡(jiǎn)單示例如下：<canvas id=“mycanvas”width=“200”height=“100”></Canvas>

注意：標(biāo)記通常需要指定一個(gè)id屬性（通常在腳本中引用），以及由width和height屬性定義的畫布大小。

width和he可以通過(guò)CSS設(shè)置創(chuàng)建畫布。

畫布是網(wǎng)頁(yè)中的矩形框，可以通過(guò)CSS&[ltcanvas>元素創(chuàng)建。

注意：默認(rèn)情況下，<canvas>元素沒(méi)有邊框或內(nèi)容。

<canvas>的一個(gè)簡(jiǎn)單示例如下：<canvas id=“mycanvas”width=“200”height=“100”></Canvas>

注意：標(biāo)記通常需要指定一個(gè)id屬性（通常在腳本中引用），以及由width和height屬性定義的畫布大小。

您可以將高度和寬度設(shè)置為百分比通過(guò)CSS。