HTML | DOM 图形对象

HTML Document Object Model（DOM）提供了一种方便的方式来在网页上添加和管理图形对象。HTML5通过添加一些新的元素，如<canvas>和<svg>，进一步扩展了这个功能。

元素

<canvas> 元素提供了一个画布，在上面可以绘制图形、绘制动画等。使用该元素时，可以通过内置的 API 方法在画布上添加文本、图形、动画等。

以下是绘制一个实心圆的示例代码：

<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.beginPath();
  ctx.arc(100, 100, 50, 0, 2 * Math.PI);
  ctx.fillStyle = "blue";
  ctx.fill();
</script>

代码解释：

• canvas 元素的 id 属性设置为 "myCanvas"，方便在脚本中获取该元素。
• canvas.getContext("2d") 方法获取 CanvasRenderingContext2D 对象，对画布进行渲染。
• ctx.beginPath() 开始一个新的路径。
• ctx.arc(100, 100, 50, 0, 2 * Math.PI) 绘制一个圆心坐标 (100, 100)，半径为 50 的圆。
• ctx.fillStyle = "blue" 将圆的填充颜色设置为蓝色。
• ctx.fill() 实心填充圆。

<svg> 元素允许在网页上创建矢量图形。该元素是可缩放的，并且矢量图形的分辨率与浏览器视图大小无关。SVG 中的图形对象是独立于分辨率的。

以下是在 <svg> 元素中使用 rect 元素绘制一个带有文本的矩形的示例代码：

<svg width="200" height="200">
  <rect x="50" y="50" width="100" height="70"
    style="fill:rgb(255,255,255);stroke-width:2;stroke:rgb(0,0,0)" />
  <text x="65" y="85">Hello World!</text>
</svg>

代码解释：

• svg 元素的 width 和 height 属性设置为 200，可以指定矢量图形的大小。
• rect 元素的 x 和 y 属性分别设置为 50 和 50，宽度为 100，高度为 70。
• style 属性设置填充色为白色，线宽为 2，线条颜色为黑色。
• text 元素设置文本内容为 "Hello World!"，并设置位置在矩形内部。

总结

在 HTML 网页上添加和管理图形对象是很常见的需求。通过 HTML | DOM 图形对象，可以通过 Canvas 和 SVG 元素方便地实现网页上的动态图形和动画等效果。