logo标签列表

HTML5画布是什么？

javascripthtmlhtml5-canvas
4

我有点困惑HTML5画布是什么。 我被告知它是JavaScript，但它似乎更重要？

  1. 它与JavaScript有何不同？

  2. 为什么它如此惊人？

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

注：本文中的HTML5画布指的是HTML5 Canvas元素。
5个回答
7
< p > canvas 基本上是一个可以使用 JavaScript 绘制的 img 元素。

6

我建议您阅读这篇文章《HTML5 Canvas - 初步了解》

简而言之，它不能替代JavaScript。

HTML 5 canvas让您可以使用JavaScript轻松、强大地绘制图形。对于每个画布元素，您可以使用“上下文”（类似于绘画本的一页），并向其发出JavaScript命令以绘制任何您想要的内容。浏览器可以实现多个画布上下文，并且不同的API提供绘图功能。

2

画布元素本质上是一个可以通过编程进行绘制的绘图画布；一种可编程位图绘图工具，用于Web。

我想它的“惊人”之处，除了我们现在都可以轻松创建基于Web的MS Paint克隆版本之外，还在于您拥有一个更丰富、完全自由形式的区域，可以在客户端和即时生成复杂的图形。您可以绘制漂亮的图表，或对照片进行处理。据说，您也可以进行动画制作！

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

动画位是你必须自己实现的。画布本身不支持帧或移动。 - Tor Valamo
2

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

Canvas 是一个 HTML5 元素，可以通过使用 JavaScript 在页面上实时渲染图形、动画、图表、照片合成或任何其他可视化对象。更常见的是，Canvas 用于构建网络游戏和在线演示。

1
  • 画布(Canvas) - 一个矩形区域，类似于白纸
  • 上下文(Context) - 返回一个对象，可以在其上调用许多函数，用于在画布上绘制图形和动画（就像铅笔在纸上绘画一样）

请参见以下示例，该示例在画布上绘制一条线：

<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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接