我對HTML5 canvas是什麼感到困惑。我被告知這是JavaScript,但它似乎是一個更大的交易?什麼是HTML5畫布?
是什麼讓它不同於JavaScript?
爲什麼它如此驚人?
它做JavaScript以外的其他事情嗎?
我對HTML5 canvas是什麼感到困惑。我被告知這是JavaScript,但它似乎是一個更大的交易?什麼是HTML5畫布?
是什麼讓它不同於JavaScript?
爲什麼它如此驚人?
它做JavaScript以外的其他事情嗎?
我建議你閱讀這篇文章HTML5 Canvas - the basics
但在短。它不會取代JavaScript。
HTML 5 帆布爲您提供了一個簡單而強大的 使用方式的JavaScript 繪製圖形。對於每個畫布元素 ,您可以使用「上下文」(考慮繪圖板中的 頁面), 可以發出JavaScript命令以繪製 任何您想要的內容。瀏覽器可以通過 實現多個畫布上下文和 不同的API提供圖形 的功能。
canvas
基本上是一個img
元素,您可以使用javascript進行繪製。
Canvas element本質上是一個繪圖畫布,可以以編程方式繪製;一種用於網絡的可編寫腳本的位圖繪圖工具。
除了我們現在都可以輕鬆創建基於網頁的MS Paint克隆這一事實之外,我想這個「驚人」的事情是,您有更豐富,完全自由的區域來創建複雜的圖形客戶端和即時。你可以繪製漂亮的圖形,或者用照片做事。據稱,你也可以做動畫!
Mozilla's Developer Center has a reasonable tutorial如果你想嘗試一下。
雖然動畫片是你必須實現的東西。畫布本身不支持框架或運動。 – 2010-03-26 12:49:21
首先,Canvas不是JavaScript!這兩個是完全不同的東西。
畫布是一種HTML5元素,可用於通過使用JavaScript來實時渲染圖形,動畫,圖形,照片合成或任何其他可視對象。更多時候,畫布已經用於構建網頁遊戲和在線演示。
請看下面的例子,其繪製在畫布上的行:
<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>
謝謝你這樣的外行解釋!大聲笑+1 – 2014-03-25 23:12:31