《HTML5 canvas开发详解（第2版）》——1.3 本书使用的基础HTML页面
本節(jié)書摘來自異步社區(qū)《HTML5 canvas開發(fā)詳解（第2版）》一書中的第1章，第1.3節(jié),作者： 【美】Steve Fulton , Jeff Fulton 更多章節(jié)內(nèi)容可以訪問云棲社區(qū)“異步社區(qū)”公眾號(hào)查看。
1.3 本書使用的基礎(chǔ)HTML頁(yè)面
可以使用多個(gè)HTML標(biāo)簽來創(chuàng)建HTML頁(yè)面，在HTML以前的版本中，需明確指示W(wǎng)eb瀏覽器如何渲染HTML頁(yè)面的標(biāo)簽（例如< font >和< center >）。然而，在過去10年中，瀏覽器的標(biāo)準(zhǔn)越來越嚴(yán)格，這類標(biāo)簽就被束之高閣了。CSS（層疊樣式表）成為定義HTML內(nèi)容樣式的主要方式。因?yàn)楸緯皇顷P(guān)于如何創(chuàng)建HTML頁(yè)面的（頁(yè)面中不包含Canvas），因此這里不打算討論CSS的內(nèi)部工作原理。
本節(jié)將只關(guān)注兩個(gè)最基本的HTML標(biāo)簽：< div >和< canvas >。
1.3.1 < div >
< div >是本書主要使用的一個(gè)HTML標(biāo)簽，用來定位< canvas >在HTML頁(yè)面的位置。
例1-2使用< div >標(biāo)簽定義了“Hello World!”在屏幕上的位置，如圖1-2所示。
例1-2 HTML5中的“Hello World！”<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CH1EX2: Hello World HTML Page With A DIV </title> </head> <body> <div style="position: absolute; top: 50px; left: 50px; "> Hello World! </div> </body> </html>https://yqfile.alicdn.com/4e97e9fed2442183dd43257e348fe428d9303617.png" >
style="position: absolute; top: 50px; left: 50px;"——這段代碼是在HTML頁(yè)面中使用內(nèi)聯(lián)CSS的例子。它告訴瀏覽器呈現(xiàn)內(nèi)容的絕對(duì)位置為：距離頁(yè)面頂端50像素，并且距離頁(yè)面左端50像素。
警告
這個(gè)< div >可以在瀏覽器中定位畫布，但是對(duì)試圖在畫布上捕捉鼠標(biāo)點(diǎn)擊時(shí)則沒有任何幫助。在第5章中，本書將討論一種既能定位畫布又能捕獲正確的鼠標(biāo)點(diǎn)擊位置的方法。
1.3.2
利用對(duì)< div >進(jìn)行絕對(duì)定位，有助于更好地使用< canvas >。把< canvas >放在< div >內(nèi)，< div >可以幫讀者獲取信息。例如，當(dāng)鼠標(biāo)滑過畫布時(shí)，可以獲取定義指針的相對(duì)位置。
總結(jié)
以上是生活随笔為你收集整理的《HTML5 canvas开发详解（第2版）》——1.3 本书使用的基础HTML页面的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何安装透明窗口主题Emerald在Ub
- 下一篇： 《Oracle数据库管理与维护实战》——