giáo trình HTML5 và CSS3 từng bước phần 8

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ả
Nội dung trích xuất từ tài liệu:
giáo trình HTML5 và CSS3 từng bước phần 8 307 Using the HTML5 TagThis example adds a .click() function thanks to jQuery . The .click() function examineswhere the mouse click occurred within the canvas element . It then clears the canvas anddraws a new rectangle at the point where the mouse was clicked . This example begins toshow the interactivity that’s possible with the canvas element .Finally, here’s the fun example that I promised . Building on the previous example, thecode shown here creates a larger canvas on a page, and then builds a number of blockson the page . As you click each block, the code removes that block . Load this exampleinto a canvas-compatible browser (or run it from Javascript02 .html 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 libraryfor the example shown here, which uses a CDN-based jQuery. Feel free to use your local copyof jQuery if you have one downloaded, or refer to the “Obtaining jQuery” section on page 293 forassistance on downloading jQuery.Canvas Block Alternate content goes here $(document).ready(function() { var canvas = document.getElementById(myCanvas); if (canvas.getContext) { var canvasContext = canvas.getContext(2d); canvasContext.fillStyle = 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++) { canvasContext.fillRect(offsetX,offsetY, blockWidth,blockHeight); offsetX = offsetX + blockWidth + 2; colCount++; if (colCount == numBlocks) { colCount = 0; offsetY = offsetY + blockHeight + 2; offsetX = 0; } } $(#myCanvas).click(function(f) { var x = f.pageX - this.offsetLeft; var y = f.pageY - this.offsetTop; var xBlock = Math.floor((x / blockWidth)); var yBlock = Math.floor((y / blockHeight)); var xSpan = 0, ySpan = 0; if (xBlock > 0) { xSpan = xBlock * 2; } if (yBlock > 0) { ySpan = yBlock * 2; } var xPos = (blockWidth * xBlock) + xSpan; var yPos = (blockHeight * yBlock) + ySpan; canvasContext.clearRect(xPos,yPos,blockWidth, blockHeight); }); } else { // You could do something else here // because the browser doesn’t support // the canvas element. } }); Here’s what this application initially looks like: 309 Using the HTML5 TagIf you become bored with a 4 by 4 grid, change the number of blocks by changing thisline in the code, as follows:var numBlocks = 4;The code in the example will dynamical ...