I’ve received numerous requests for some HTML 5 Help. So, in this tutorial I’ll cover one of the most exciting new features being the HTML 5 Canvas tag.
This will be a long tutorial that you’ll be able to use as a HTML 5 guide.
While HTML 5 is nor supported by Internet Explorer versions prior to the newest version 9, I felt I had waited long enough to cover this topic.
All of the code follows the video. Feel free to use it in anyway that you’d like.
HTML 5 Help Topics
In this tutorial I’ll cover the following in regards to HTML 5:
<!doctype html> <!-- HTML 5 Standard Web Page Tags --> <!-- The first line tells the browser to render the page in standards mode --> <!-- Next line of code tells the browser what language is used --> <html lang="en"> <head> <!-- Tell the browser what character encoding method is being used --> <meta charset="UTF-8"> <!-- modernizr is a JavaScript library that allows you to use HTML 5 on all browsers. I'm using it here to test if canvas is installed --> <script src="modernizr.custom.64953.js"></script> <style type="text/css"> #canvasNum1 { background-color: green; }; </style> <script type="text/javascript"> // When the web page is loaded this code will execute window.onload = function() { /* Call this function to execute all the code and check if canvas is supported */ myCanvasApp(); } function myCanvasApp() { if (!isCanvasSupported()) { return; } // Test to see if canvas works // document.write("Canvas is Working"); var myCanvasNum1 = document.getElementById('canvasNum1'); myCanvasNum1.style.background = "black"; myCanvasNum1.style.height = "600px"; myCanvasNum1.style.width = "600px"; // Get access to the canvas 2d methods and properties var canvasDraw1 = myCanvasNum1.getContext("2d"); if (canvasDraw1 == null) { return; } /* There are 3 stroke and fill styles: fillStyle, strokeStyle and lineWidth. They all default to black */ // Define the fill style canvasDraw1.fillStyle = "green"; // Draw a rectangle with the current fill canvasDraw1.fillRect(10,10,200,200); // fillRect(x, y, width, height) // Define the line width canvasDraw1.lineWidth = 5; // Define the stroke color canvasDraw1.strokeStyle = '#ccc'; // Draw a rectangle using the current stroke canvasDraw1.strokeRect(10,10,200,200); // Clear rectangle that lies with in the defined area canvasDraw1.clearRect(10,10,100,100); canvasDraw1.clearRect(0,0,600,600); // Create a gradient by first defining starting x1, y1 and ending x2, y2 var gradientSamp = canvasDraw1.createLinearGradient(10,10,200,200); // Define the colors that go into the gradient // Define how much of the space the gradient takes up using fractions gradientSamp.addColorStop(0, 'blue'); gradientSamp.addColorStop(1 / 3, 'purple'); gradientSamp.addColorStop(2 / 3, 'white'); canvasDraw1.fillStyle = gradientSamp; canvasDraw1.fillRect(10,10,200,200); // You create a radial gradient by defining two ellipses /* x center for first ellipse, y for first ellipse, radius for first ellipse and then the same for the second ellipse */ var gradientRadial = canvasDraw1.createRadialGradient(100,100,5, 100,100,100); // Define colors to be used by both gradients gradientRadial.addColorStop(0, 'white'); gradientRadial.addColorStop(1, 'blue'); canvasDraw1.fillStyle = gradientRadial; // arc(x, y, radius, starting angle, ending angle) canvasDraw1.beginPath(); canvasDraw1.arc(100,100,70,0,Math.PI*2); canvasDraw1.closePath(); canvasDraw1.fill(); } // Uses Modernizer to check if canvas is supported with the current browser function isCanvasSupported() { return Modernizr.canvas; } </script> <title>Messing with HTML 5</title> </head> <body> <canvas id="canvasNum1" width="500" height="400">Your browser doesn't support HTML 5 Canvas</canvas> </body> </html>
Leave a Reply