2010-03-20 58 views
3

我对HTML5 canvas是什么感到困惑。我被告知这是JavaScript,但它似乎是一个更大的交易?什么是HTML5画布?

  1. 是什么让它不同于JavaScript?

  2. 为什么它如此惊人?

  3. 它做JavaScript以外的其他事情吗?

回答

5

我建议你阅读这篇文章HTML5 Canvas - the basics

但在短。它不会取代JavaScript。

HTML 5 帆布为您提供了一个简单而强大的 使用方式的JavaScript 绘制图形。对于每个画布元素 ,您可以使用“上下文”(考虑绘图板中的 页面), 可以发出JavaScript命令以绘制 任何您想要的内容。浏览器可以通过 实现多个画布上下文和 不同的API提供图形 的功能。

5

canvas基本上是一个img元素,您可以使用javascript进行绘制。

+0

谢谢你这样的外行解释!大声笑+1 – 2014-03-25 23:12:31

1

Canvas element本质上是一个绘图画布,可以以编程方式绘制;一种用于网络的可编写脚本的位图绘图工具。

除了我们现在都可以轻松创建基于网页的MS Paint克隆这一事实之外,我想这个“惊人”的事情是,您有更丰富,完全自由的区域来创建复杂的图形客户端和即时。你可以绘制漂亮的图形,或者用照片做事。据称,你也可以做动画!

Mozilla's Developer Center has a reasonable tutorial如果你想尝试一下。

+0

虽然动画片是你必须实现的东西。画布本身不支持框架或运动。 – 2010-03-26 12:49:21

1

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

画布是一种HTML5元素,可用于通过使用JavaScript来实时渲染图形,动画,图形,照片合成或任何其他可视对象。更多时候,画布已经用于构建网页游戏和在线演示。

0
  • 帆布 - 一个矩形区域像白纸
  • 语境 - 通过使用我们可以调用许多功能上它是用来画在画布上的图形和动画(比如如何返回对象铅笔被用来在纸上)

请看下面的例子,其绘制在画布上的行:

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