Tham khảo tài liệu 'giáo trình html5 và css3 từng bước phần 8', công nghệ thông tin, kỹ thuật lập trình phục vụ nhu cầu học tập, nghiên cứu và làm việc hiệu quả | Using the HTML5 canvas Tag 307 This example adds a .click function thanks to jQuery. The .click function examines where the mouse click occurred within the canvas element. It then clears the canvas and draws a new rectangle at the point where the mouse was clicked. This example begins to show the interactivity that s possible with the canvas element. Finally here s the fun example that I promised. Building on the previous example the code shown here creates a larger canvas on a page and then builds a number of blocks on the page. As you click each block the code removes that block. Load this example into a canvas-compatible browser or run it from provided in the -Solutions folder for this chapter and see how fast you can clear all the blocks Important If you jumped ahead to the fun example then you ll need to use the jQuery library for the example shown here which uses a CDN-based jQuery. Feel free to use your local copy of jQuery if you have one downloaded or refer to the Obtaining j Query section on page 293 for assistance on downloading jQuery. DOCTYPE HTML html head meta http-equiv Content-Type content text html charset utf-8 title Canvas Block title script type text javascript src http script head body canvas width 400 height 400 id myCanvas p Alternate content goes here p canvas script type text javascript document .ready function var canvas myCanvas if var canvasContext 2d blue var numBlocks 4 var canWidth myCanvas .attr width var canHeight myCanvas .attr height var blockWidth canWidth numBlocks - 2 var blockHeight canHeight numBlocks - 2 var offsetX 0 var offsetY 0 var colCount 0 var numTotal numBlocks numBlocks 308 Chapter 16 for i 0 i numTotal i offsetX offsetY blockWidth blockHeight offsetX offsetX blockWidth 2 colCount if colCount numBlocks colCount 0 offsetY offsetY blockHeight 2 offsetX 0 .
