4

我对 HTML5 画布是什么感到有些困惑。有人告诉我它是 JavaScript，但它似乎更重要？

  1. 是什么使它与 javascript 不同？

  2. 为什么这么神奇？

  3. 除了 JavaScript 之外，它还做其他事情吗？

4

5 回答 5

7

canvas基本上是img您可以使用 javascript 绘制的元素。

于 2010-03-20T16:23:29.237 回答
6

我建议你阅读这篇文章HTML5 Canvas - 基础知识

但简而言之。它不会取代 javascript。

HTML 5画布为您提供了一种使用 JavaScript 绘制图形的简单而强大的方法。对于每个画布元素，您可以使用“上下文”（想想绘图板中的页面），您可以在其中发出 JavaScript 命令来绘制任何您想要的东西。浏览器可以实现多个画布上下文，并且不同的 API 提供绘图功能。

于 2010-03-20T16:22:24.637 回答
2

Canvas 元素本质上是一个可以通过编程方式绘制的画布；一种用于网络的可编写脚本的位图绘图工具。

我想它的“惊人”之处在于，除了我们现在都可以轻松创建基于 Web 的 MS Paint 克隆这一事实之外，您拥有一个更丰富、完全自由的区域来创建复杂的图形客户端和即时。你可以画漂亮的图表，或者用照片做事。据称，还可以做动画！

如果您想尝试一下，Mozilla 的开发者中心有一个合理的教程。

于 2010-03-20T16:24:14.567 回答
2

首先，Canvas 不是 JavaScript！这两个是完全不同的东西。

Canvas 是一种 HTML5 元素，可用于使用 JavaScript 即时渲染图形、动画、图形、照片合成或任何其他视觉对象。更多时候，画布用于构建网页游戏和在线演示。

于 2013-01-19T06:32:24.053 回答
1
  • 画布- 像白纸一样的矩形区域
  • 上下文- 通过使用我们可以调用的许多函数返回对象，这些函数用于在画布上绘制图形和动画（如铅笔在纸上的使用方式）

请参阅以下在画布上绘制线条的示例：

<html>
      <body>
       <canvas id="c" width="200" height="200" style="border:1px solid"></canvas>
        <script>
          var canvas = document.getElementById("c");//get the canvas in javascript
          var context = canvas.getContext("2d");//getcontext on canvas
          context.beginPath();//start the path.we are going to draw the line
          context.moveTo(20,20);//starting point of Line
          context.lineTo(40,20);//ending point of Line
          context.stroke(); //ink used for drawing Line (Default: Black)
        </script>
      </body>
    </html>

于 2014-10-09T10:59:29.627 回答