這一節(jié)主要講兩個(gè)標(biāo)簽 canvas 和 img。
canvas 由 HTML5 引入，用于圖形繪制，而 img 標(biāo)簽則用于在網(wǎng)頁(yè)上顯示一個(gè)已經(jīng)存在的圖片。
畫(huà)布(canvas)
canvas 標(biāo)簽只是圖形容器，顯示在其中的圖形則需要使用腳本來(lái)繪制。
下面通過(guò)一系列的例子來(lái)說(shuō)明 canvas 具備的繪制能力。
創(chuàng)建一個(gè)畫(huà)布
<canvas id="canvasContainer" width="300" height="200" style="border:1px solid #000;" > </canvas>
使用 Javascript 繪制圖像
canvas 本身沒(méi)有繪圖能力，繪制工作需要使用 Javascript 來(lái)實(shí)現(xiàn)。
<script> function drawSomthing() { var c = document.getElementById("canvasContainer"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(10, 10, 150, 75); } </script> <body onload="drawSomthing()"> <canvas id="canvasContainer" width="300" height="200" style="border:1px solid #000;" > </canvas> </body>
在 body 的 onload 事件中，調(diào)用了方法 drawSomething。這個(gè)方法有四行代碼。
第一行，獲取到頁(yè)面上的 canvas 元素。
第二行，獲取 canvas 元素的 2d 上下文，用于后續(xù)的繪畫(huà)。
第三行，指定填充的是紅色。
第四行，指定填充的是長(zhǎng)方形，前兩個(gè)值是坐標(biāo)，后兩個(gè)值是長(zhǎng)和寬。
canvas 繪制線條
canvas 坐標(biāo)是二維網(wǎng)格，它從左上角(0,0)開(kāi)始算起。上述例子里，(10,10, 150, 75)，意思是從坐標(biāo)點(diǎn)(10,10)開(kāi)始，畫(huà)一個(gè) 150*75 的長(zhǎng)方形。
<script> function drawLine() { var c = document.getElementById("canvasContainer"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke(); } </script> <body onload="drawLine()"> <canvas id="canvasContainer" width="300" height="200" style="border:1px solid #000;" > </canvas> </body>
canvas 繪制文本
使用 canvas 可以繪制文本，如下：
<script> function drawText() { var c = document.getElementById("canvasContainer"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World", 10, 50); } </script> <body onload="drawText()"> <canvas id="canvasContainer" width="300" height="200" style="border:1px solid #000;" > </canvas> </body>
canvas 漸變填充
在使用 canvas 繪制時(shí)，填充的顏色可以是漸變的。
canvas 的漸變有兩種，線條漸變和徑向漸變。
<script> function drawGradient() { var c = document.getElementById("canvasContainer"); var ctx = c.getContext("2d"); var grd = ctx.createLinearGradient(0, 0, 200, 0); grd.addColorStop(0, "red"); grd.addColorStop(1, "white"); ctx.fillStyle = grd; ctx.fillRect(10, 10, 150, 80); } </script> <body onload="drawGradient()"> <canvas id="canvasContainer" width="300" height="200" style="border:1px solid #000;" > </canvas> </body>
canvas 展現(xiàn)圖像
使用 canvas 能夠把一幅圖像放置到畫(huà)布上。
<script> function drawPic() { var c = document.getElementById("canvasContainer"); var ctx = c.getContext("2d"); var img = document.getElementById("sourceImg"); ctx.drawImage(img, 0, 0, 300, 110); } </script> <body onload="drawPic()"> <canvas id="canvasContainer" width="300" height="200" style="border:1px solid #000;" > </canvas> <img id="sourceImg" src="../img/html-0.jpg" width="300" height="110" /> </body>
img
img 標(biāo)簽不同于 canvs，它用于在網(wǎng)頁(yè)上展示已有的圖片。
img 的屬性主要是 src，即要展示的圖片的路徑。
<img id="sourceImg" src="../img/html-0.jpg" width="300" height="110" alt="這是一張 HTML5的示意圖。" />
效果在前一個(gè)示例里已經(jīng)有了，就不再貼圖。
這里 alt 指定的文字信息，在瀏覽器無(wú)法加載圖片時(shí)顯示。告訴用戶這里缺失是什么樣的圖片。
圖片地圖
img 標(biāo)簽搭配 map 標(biāo)簽，可以為圖片添加可點(diǎn)擊的區(qū)域，類似于為圖片中的區(qū)域添加超鏈接。
<img src="../img/3-6-0-solar-system.png" width="466" height="278" alt="solar system" usemap="#solarsystem" /> <map name="solarsystem"> <area shape="rect" coords="13,97,56,110" href="3-6-1-sun.html" alt="Sun" title="太陽(yáng)" /> <area shape="circle" coords="235,95,20" href="3-6-1-jupiter.html" alt="Jupiter" title="木星" /> </map>
?
以上示例里，使用了 map 標(biāo)簽，為太陽(yáng)系圖片里的行星添加了鏈接。
當(dāng)用戶的鼠標(biāo)經(jīng)過(guò)太陽(yáng)或木星時(shí)，會(huì)顯示成小手（截圖里不能展現(xiàn)）并成為可點(diǎn)擊的狀態(tài)。此時(shí)點(diǎn)擊它，就會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的 href 里指定的頁(yè)面上。
總結(jié)
?? canvas 標(biāo)簽只是圖形容器，顯示在其中的圖形則需要使用腳本來(lái)繪制。
?? 通過(guò)腳本可以繪制圖形，填充顏色或漸變色，還可以繪制文字。
?? img 用于展示已經(jīng)有的圖片，使用 map 可為 img 添加鏈接成為圖片地圖。
該文章在 2024/10/22 12:32:05 編輯過(guò)
400 186 1886
