这一节主要讲两个标签 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
