Ngôn ngữ

PDF Google Drive Downloader v1.1

Report a problem

Content text UNIT 4 HTML5 CANVAS (1).pdf

UNIT-4 HTML5 - Canvas HTML5 element gives you an easy and powerful way to draw graphics using JavaScript. It can be used to draw graphs, make photo compositions or do simple (and not so simple) animations. Here is a simple element which has only two specific attributes width and height plus all the core HTML5 attributes like id, name and class, etc. You can easily find that element in the DOM using getElementById() method as follows – var canvas = document.getElementById("mycanvas"); Let us see a simple example on using element in HTML5 document. The Rendering Context The is initially blank, and to display something, a script first needs to access the rendering context and draw on it. The canvas element has a DOM method called getContext, used to obtain the rendering context and its drawing functions. This function takes one parameter, the type of context2d. Following is the code to get required context along with a check if your browser supports element −
var canvas = document.getElementById("mycanvas"); if (canvas.getContext) { var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here } Browser Support The latest versions of Firefox, Safari, Chrome and Opera all support for HTML5 Canvas but IE8 does not support canvas natively. You can use ExplorerCanvas to have canvas support through Internet Explorer. You just need to include this JavaScript as follows − HTML5 Canvas Examples HTML5 Canvas - Drawing Rectangles Sr.No. Method and Description 1 fillRect(x,y,width,height) This method draws a filled rectangle. 2 strokeRect(x,y,width,height) This method draws a rectangular outline. 3 clearRect(x,y,width,height) This method clears the specified area and makes it fully transparent Here x and y specify the position on the canvas (relative to the origin) of the top-left corner of the rectangle and width and height are width and height of the rectangle.

Related document

x
Report download errors
Report content



Download file quality is faulty:
Full name:
Email:
Comment
If you encounter an error, problem, .. or have any questions during the download process, please leave a comment below. Thank you.
Sitemap | Policy | Rules