使用Canvas或SVG画图对比（翻译资料，含完整代码示例）

最新推荐文章于 2025-03-17 20:59:23 发布

weixin_41881671

最新推荐文章于 2025-03-17 20:59:23 发布

阅读量479

点赞数

分类专栏： html5

html5 专栏收录该内容

5 篇文章

订阅专栏

博客给出两个代码示例，用HTML5和JavaScript演示了Canvas和SVG创建用户界面按钮的方法。Canvas在即时模式下用像素创建，SVG用保留模式图形技术。还分别详解了两者代码，最后对比指出SVG创建UI更简单，代码行数更少，且能分别处理子元素事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这个主题包含两个独立的代码示例，它们演示了Canvas和SVG如何创建用户界面按钮。这些代码示例是用HTML5和JavaScript编写的。他们解释了如何创建一个简单的按钮，当你点击它时，它会显示一个警告框。第一个代码示例展示了Canvas如何在即时模式下使用像素来创建这个用户界面元素，方法是用arc方法绘制一个圆圈来开发一个标准的按钮。第二个示例展示了SVG如何使用保留模式的图形技术，从circle元素创建一个类似的按钮。每个样本之后的技术讨论解释了代码是如何工作的，并提供了进一步信息的链接。最后的比较材料总结了在每种技术中创建用户界面按钮的主要区别。

canvas 代码示例

<!DOCTYPE html>
<html>

  <head>
    <script type="text/javascript">
      // This function is called on page load.

      function drawOnCanvas() {

        // Get the canvas element.
        var canvas = document.getElementById("uIElement");

        // Make sure you got it.
        if (canvas.getContext)

        // If you have it, create a canvas user interface element.
        {
          // Specify 2d canvas type.
          var ctx = canvas.getContext("2d");

          // Draw gold UI element.
          // Start the path.
          ctx.beginPath();

          // Define the fill color in RGB for gold.
          ctx.fillStyle = "rgb(255 ,215 ,0)";

          // Draw the circle using an arc.
          ctx.arc(100, 100, 50, 0, 2 * Math.PI, true);

          // Fill the circle.
          ctx.fill();
        }
      }

      // This function is called when you click the canvas.

      function clickOnUI() {

        alert("You clicked the canvas UI element.");

      }
    </script>
  </head>

  <body onload="drawOnCanvas()">
    <h1>
      Canvas User Interface
    </h1>
    <!-- Create the Canvas element. -->
    <canvas id="uIElement" width="200" height="200" onclick="clickOnUI()">
    </canvas>
    <p>
      Click on the gold circular user interface element.
    </p>
  </body>

</html>

这里写图片描述
canvas代码示例详解
Canvas示例使用一个标准的HTML5标题header，< !doctype html>因此，浏览器可以将其作为HTML5标准文本。
< canvas>标签被包含在body身体里。您必须指定宽度和高度。一个ID被分配给标签，这样它就可以成为文档对象模型的一部分。您还必须指定在单击画布时调用哪个函数。
< script> 的部分有两个部分;一种用于绘制用户界面，另一种用于处理用户界面上的单击事件。
绘制用户界面
当页面加载时，调用drawOnCanvas函数。它以像素的方式绘制用户界面。
画布< canvas>元素被添加到DOM中，并创建绘图上下文。
绘图动作从开始路径开始 beginPath。一种颜色（黄金）是用填装方式指定的 fillStyle。通过使用arc方法来创建一个圆，从而扩展了路径。然后，路径通过调用fill完成。
处理单击事件
当用户单击画布元素时，就会调用clickOnUI函数。显示一个警告框。

svg代码示例

<!DOCTYPE html>
<html>

  <head>
    <script type="text/javascript">
      // This function is called when the circle is clicked.


      function clickMe() {

        // Display the alert.
        alert("You clicked the SVG UI element.");

      }
    </script>
  </head>

  <body>
    <h1>
      SVG User Interface
    </h1>
    <!-- Create the SVG pane. -->
    <svg height="200" width="200">
      <!-- Create the circle. -->
      <circle cx="100" cy="100" r="50" fill="gold" id="uIElement" onclick="clickMe();"
      />
    </svg>
    <p>
      Click on the gold circular user interface element.
    </p>
  </body>

</html>

这里写图片描述

SVG代码示例讨论
SVG样本使用标准的HTML5头，。请注意，并不是所有的浏览器都支持HTML5的这一方面，在那里SVG标记被当作HTML标记对待。这种处理称为内联SVG inline SVG。
svg标记包含在正文中。您必须指定SVG绘图容器形状的宽度和高度。在SVG容器内，您必须添加一个圆形形状元素。一个ID被分配给circle标签，这样它就可以成为文档对象模型的一部分。您必须指定圆和半径的起始位置。您还必须指定何时单击圆圈时调用哪个函数。请注意，与canvas样例不同，您可以只在圆圈中处理单击事件，而不是整个SVG窗格。所有的用户界面元素都是在正文中创建的，而不是使用JavaScript。
脚本部分只有一个函数，当您单击它时，它将处理click事件，显示一个警报。
对比总结
这些代码示例的主要区别在于，通过使用SVG的留存模式图形显示，您可以在body中以html样式的标签创建所有用户界面细节。因为每个SVG元素和子元素都可以响应单个事件，所以您可以很容易地创建复杂的用户界面。Canvas要求您遵循一个更复杂的代码序列来指定用户界面的每个部分是如何创建的。您需要使用的顺序是：
获得上下文。
开始画。
指定每一行的颜色和填充。
定义的形状。
完成图纸。
此外，Canvas只能处理整个画布的事件。如果您有一个更复杂的用户界面，您必须确定画布上单击的位置的坐标。SVG可以分别处理每个子元素的事件。
一般来说，SVG需要的代码行数比同等的Canvas程序要少。在前面的示例中，SVG页包含34行代码，Canvas页包含55行。