Revision 319309 of Canvas tutorial

  • Revision slug: Canvas_tutorial
  • Revision title: Canvas tutorial
  • Revision id: 319309
  • Created:
  • Creator: tuan_bk
  • Is current revision?
  • Comment

Revision Content

<canvas> là một thẻ HTML cho phép bạn có thể sử dụng để vẽ sử dụng các script( thường là  JavaScript). Nó có thể, được sử dụng là ảnh (và đơn giản) animation. Bức ảnh ở bên phải là một vài ví dụ của việc dùng <canvas> mà sẽ được trình bày ở phần sau trong tutorial này.

<canvas> lần đầu tiên được giới thiệu bởi Apple cho Mac OS X Dashboard sau đó được thực thi trong Safari và Google Chrome. Các trình duyệt dựa trên Gecko 1.8, nhưFirefox 1.5, cũng cung cấp phần tử này. Phần tử <canvas> là một phần của  WhatWG Web applications 1.0 cũng được biết đến như HTML 5.

Tutorial này hướng dẫn cách sử dụng thẻ  <canvas> trong các trang HTML. Các ví dụ được cung cấp có thể giúp bạn hiểu rõ hơn điều bạn có thể làm với  <canvas> và có thể được sử dụng để bắt đầu xây dựng ứng dụng của riêng bạn.

Trước khi bắt đầu

Sử dụng thẻ  <canvas> không quá khó nhưng banjn cần hiểu cơ bản về  HTMLJavaScript.

Thẻ  <canvas> không được hỗ trợ trong một số trình duyệt cũ, nhưng đã được hỗ trợ từ bản Firefox 1.5 trở lên, Opera 9 trở lên, phiên bản mớ hơn của Safari, Chrome và Internet Explorer 9.

Nội dung tutorial

Xem thêm

{{ Next("Canvas_tutorial/Basic_usage") }}

Revision Source

<p><strong><code><a href="/en-US/docs/HTML/Canvas" title="en-US/docs/HTML/Canvas">&lt;canvas&gt;</a></code></strong> là một thẻ <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a> cho phép bạn có thể sử dụng để vẽ sử dụng các script( thường là&nbsp; <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>). Nó có thể, được sử dụng là ảnh (và <a href="/en-US/docs/HTML/Canvas/A_Basic_RayCaster" title="en-US/docs/A_Basic_RayCaster">đơn giản</a>) animation. Bức ảnh ở bên phải là một vài ví dụ của việc dùng <code>&lt;canvas&gt;</code> mà sẽ được trình bày ở phần sau trong tutorial này.</p>
<p><code>&lt;canvas&gt;</code> lần đầu tiên được giới thiệu bởi Apple cho Mac OS X Dashboard sau đó được thực thi trong Safari và Google Chrome. Các trình duyệt dựa trên <a href="/en-US/docs/Gecko" title="en-US/docs/Gecko">Gecko</a> 1.8, nhưFirefox 1.5, cũng cung cấp phần tử này. Phần tử <code>&lt;canvas&gt;</code> là một phần của&nbsp; <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">WhatWG Web applications 1.0</a> cũng được biết đến như HTML 5.</p>
<p>Tutorial này hướng dẫn cách sử dụng thẻ&nbsp; <code>&lt;canvas&gt;</code> trong các trang HTML. Các ví dụ được cung cấp có thể giúp bạn hiểu rõ hơn điều bạn có thể làm với&nbsp; &lt;canvas&gt; và có thể được sử dụng để bắt đầu xây dựng ứng dụng của riêng bạn.</p>
<h2 id="Before_you_start" name="Before_you_start">Trước khi bắt đầu</h2>
<p>Sử dụng thẻ&nbsp; <code>&lt;canvas&gt;</code> không quá khó nhưng banjn cần hiểu cơ bản về&nbsp; <a href="/en-US/docs/HTML" title="en-US/docs/HTML">HTML</a> và <a href="/en-US/docs/JavaScript" title="en-US/docs/JavaScript">JavaScript</a>.</p>
<p>Thẻ&nbsp; <code>&lt;canvas&gt;</code> không được hỗ trợ trong một số trình duyệt cũ, nhưng đã được hỗ trợ từ bản Firefox 1.5 trở lên, Opera 9 trở lên, phiên bản mớ hơn của Safari, Chrome và Internet Explorer 9.</p>
<h2 id="In_this_tutorial" name="In_this_tutorial">Nội dung tutorial</h2>
<ul>
  <li><a href="/en-US/docs/Canvas_tutorial/Basic_usage" title="en-US/docs/Canvas_tutorial/Basic_usage">Cách sử dụng cơ bản</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Drawing_shapes" title="en-US/docs/Canvas_tutorial/Drawing_shapes">Vẽ các khối hình</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Using_images" title="en-US/docs/Canvas_tutorial/Using_images">Sử dụng hình ảnh</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Applying_styles_and_colors" title="en-US/docs/Canvas_tutorial/Applying_styles_and_colors">Sử dụng styles và màu sắc</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Transformations" title="en-US/docs/Canvas_tutorial/Transformations">Các phép biến đổi hình</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Compositing" title="en-US/docs/Canvas_tutorial/Compositing">Compositing</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Basic_animations" title="en-US/docs/Canvas_tutorial/Basic_animations">Animation cơ bản</a></li>
  <li><a href="/en-US/docs/Canvas_tutorial/Optimizing_canvas" title="https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Optimizing_canvas">Tối ưu hóa canvas</a></li>
</ul>
<h2 id="See_also" name="See_also">Xem thêm</h2>
<ul>
  <li><a href="/en-US/docs/HTML/Canvas" title="en-US/docs/HTML/Canvas">Trang các chủ đề về Canvas</a></li>
  <li><a href="/en-US/docs/HTML/Canvas/Drawing_Graphics_with_Canvas" title="en-US/docs/Drawing_Graphics_with_Canvas">Vẽ hình với Canvas</a></li>
  <li><a href="/en-US/docs/tag/Canvas_examples" title="/en-US/docs/tag/Canvas_examples">Ví dụ về Canvas</a></li>
  <li><a class="external" href="http://html5tutorial.com" title="http://html5tutorial.com">HTML5 Tutorial</a></li>
  <li><a href="/en-US/docs/Drawing_text_using_a_canvas" title="/en-US/docs/Drawing_text_using_a_canvas">Vẽ chữ sử dụng Canvas</a></li>
  <li><a class="external" href="http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingText/AddingText.html#//apple_ref/doc/uid/TP40010542-CH6-SW4" title="en-US/docs/Adding Text to Canvas">Thêm chữ vào Canvas</a></li>
  <li><a class="external" href="http://www.canvasdemos.com/" title="Canvas Demos">Ví dụ về Canvas - Game, ứng dụng, công cụ, và tutorial</a></li>
  <li><a class="link-https" href="https://sites.google.com/site/canvasdraw/" title="https://sites.google.com/site/canvasdraw/">Công cụ vẽ Canvas</a></li>
  <li><a class="external" href="http://canvimation.github.com/" title="http://canvimation.github.com/">Ứng dụng animation với canvas</a></li>
  <li><a class="external" href="http://billmill.org/static/canvastutorial/" title="http://billmill.org/static/canvastutorial/">interactive canvas tutorial</a></li>
  <li><a class="external" href="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html" title="http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html">Canvas Cheat Sheet với tất cả các thuộc tính và phương thức</a></li>
  <li><a class="external" href="http://visitmix.com/labs/ai2canvas/" title="http://visitmix.com/labs/ai2canvas/">Adobe Illustrator với plugin Canvas</a></li>
  <li><a class="external" href="http://www.html5canvastutorials.com/" title="http://www.html5canvastutorials.com/">HTML5 Canvas Tutorials</a></li>
  <li><a class="external" href="http://html5tutorial.com/how-to-draw-a-point-with-the-canvas-api" title="http://html5tutorial.com/how-to-draw-a-point-with-the-canvas-api">Làm thế nào để vẽ một điểm với Canvas API</a></li>
  <li><a class="external" href="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api" title="http://html5tutorial.com/how-to-draw-n-grade-bezier-curve-with-canvas-api">Làm thế nào để vẽ đường cong Bé zier N điểm với Canvas API</a></li>
  <li><a class="external" href="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/" title="http://creativejs.com/2011/08/31-days-of-canvas-tutorials/">Tutorial canvas 31 ngày</a></li>
</ul>
<div>
  {{ Next("Canvas_tutorial/Basic_usage") }}</div>
Revert to this revision