2010-03-20 60 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>