這一節主要講兩個標簽 canvas 和 img。
canvas 由 HTML5 引入，用于圖形繪制，而 img 標簽則用于在網頁上顯示一個已經存在的圖片。
畫布(canvas)
canvas 標簽只是圖形容器，顯示在其中的圖形則需要使用腳本來繪制。
下面通過一系列的例子來說明 canvas 具備的繪制能力。
創建一個畫布
<canvas id="canvasContainer" width="300" height="200" style="border:1px solid #000;" > </canvas>
使用 Javascript 繪制圖像
canvas 本身沒有繪圖能力，繪制工作需要使用 Javascript 來實現。
<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 事件中，調用了方法 drawSomething。這個方法有四行代碼。
第一行，獲取到頁面上的 canvas 元素。
第二行，獲取 canvas 元素的 2d 上下文，用于后續的繪畫。
第三行，指定填充的是紅色。
第四行，指定填充的是長方形，前兩個值是坐標，后兩個值是長和寬。
canvas 繪制線條
canvas 坐標是二維網格，它從左上角(0,0)開始算起。上述例子里，(10,10, 150, 75)，意思是從坐標點(10,10)開始，畫一個 150*75 的長方形。
<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 繪制時，填充的顏色可以是漸變的。
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 展現圖像
使用 canvas 能夠把一幅圖像放置到畫布上。
<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 標簽不同于 canvs，它用于在網頁上展示已有的圖片。
img 的屬性主要是 src，即要展示的圖片的路徑。
<img id="sourceImg" src="../img/html-0.jpg" width="300" height="110" alt="這是一張 HTML5的示意圖。" />
效果在前一個示例里已經有了，就不再貼圖。
這里 alt 指定的文字信息，在瀏覽器無法加載圖片時顯示。告訴用戶這里缺失是什么樣的圖片。
圖片地圖
img 標簽搭配 map 標簽，可以為圖片添加可點擊的區域，類似于為圖片中的區域添加超鏈接。
<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="太陽" /> <area shape="circle" coords="235,95,20" href="3-6-1-jupiter.html" alt="Jupiter" title="木星" /> </map>
?
以上示例里，使用了 map 標簽，為太陽系圖片里的行星添加了鏈接。
當用戶的鼠標經過太陽或木星時，會顯示成小手（截圖里不能展現）并成為可點擊的狀態。此時點擊它，就會跳轉到對應的 href 里指定的頁面上。
總結
?? canvas 標簽只是圖形容器，顯示在其中的圖形則需要使用腳本來繪制。
?? 通過腳本可以繪制圖形，填充顏色或漸變色，還可以繪制文字。
?? img 用于展示已經有的圖片，使用 map 可為 img 添加鏈接成為圖片地圖。
該文章在 2024/10/22 12:32:05 編輯過
400 186 1886
