Download presentation
Presentation is loading. Please wait.
Published byVanessa Powell Modified over 9 years ago
1
07 – HTML5 Canvas (1) Informatics Department Parahyangan Catholic University
2
The canvas element is mainly used for manipulating 2d graphics, or create them from scratch It can… create dynamic graphics and animations that react to user interaction (e.g., games) data visualizations and graphs based on data in a HTML table, which updates on the fly. construct a UI for a Web application etc.
3
Creating a blank canvas element with 500px width and 500px height fallback content is shown when the browser doesn’t support canvas element The position of the canvas element is defined by its location within your HTML document. It can be moved around with CSS as required, just like other HTML elements.
4
The purpose of the canvas element is to act as a wrapper around the 2d rendering context It provides methods for manipulating 2d graphics We actually draw on the 2d rendering context
5
Uses flat Cartesian coordinate system with the origin (0, 0) at the top left
6
Preparing the canvas: $(document).ready(function() { }); Drawing scripts written here
7
Accessing the 2d rendering context using JS Pure JS JQuery var canvas = $("#myCanvas"); var context = canvas.get(0).getContext("2d"); var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d");
8
Drawing a Rectangle the first two parameters are x and y coordinates for the top left corner the last two parameters are width and height default color is black (can be changed) context.fillRect(40, 40, 100, 100); context.strokeRect(40, 40, 100, 100); RESULT:
9
Drawing a Line They’re actually known as paths context.beginPath(); // Start the path context.moveTo(40, 40); // Set the path origin context.lineTo(340, 40); // Set the path destination context.closePath(); // Close the path context.stroke(); // Outline the path
10
Drawing a Circle there isn’t actually a special method in canvas to create a circle there is is a method for drawing arcs context.beginPath(); // Start the path // Draw a circle context.arc(230, 90, 50, 0, Math.PI*2, false); context.closePath(); // Close the path context.fill(); // Fill the path SYNTAX: context.arc(x, y, radius, startAngle, endAngle, anticlockwise); SYNTAX: context.arc(x, y, radius, startAngle, endAngle, anticlockwise);
11
Drawing an Arc
12
Angles in canvas are in radians Converting degrees radians: Or just use radians: var degrees = 1; // 1 degree var radians = degrees * (Math.PI / 180); // 0.0175 radians
13
The fillStyle property of the 2d rendering context is the color that shapes and paths are filled in as. context.fillStyle = "rgb(255, 0, 0)"; context.fillRect(40, 40, 100, 100); // Red square context.fillRect(180, 40, 100, 100); // Red square context.fillStyle = "rgb(0, 0, 0)"; context.fillRect(320, 40, 100, 100); // Black square RESULT:
14
The strokeStyle property of the 2d rendering context is the color that shapes and paths are drawn as. context.strokeStyle = "rgb(255, 0, 0)"; context.strokeRect(40, 40, 100, 100); // Red square context.strokeRect(180, 40, 100, 100); // Red square context.strokeStyle = "rgb(0, 0, 0)"; context.strokeRect(320, 40, 100, 100); // Black square RESULT:
15
The lineWidth property of the 2d rendering context defines the thickness of the drawing line. context.lineWidth = 5; // Make lines thick context.strokeStyle = "rgb(255, 0, 0)"; context.beginPath(); context.moveTo(40, 180); context.lineTo(420, 180); // Red line context.closePath(); context.stroke(); context.lineWidth = 20; // Make lines even thicker context.strokeStyle = "rgb(0, 0, 0)"; context.beginPath(); context.moveTo(40, 220); context.lineTo(420, 220); // Black line context.closePath(); context.stroke(); RESULT:
16
We can draw text inside a canvas using fillText method It is a picture, thus not selectable It can be manipulated as other pictures Example: default font size is 10px default font is San-Serif var text = "Hello, World!"; context.fillText(text, 40, 40); Coordinate of bottom left corner of the text
17
Changing text’s font and size: Makes the font italic: context.font = "30px serif” context.font = "italic 30px serif"; RESULT:
18
We also can create stroked text: var text = "Hello, World!"; context.font = "italic 60px serif"; context.strokeText(text, 40, 100); RESULT:
19
Normal HTML element can be set to 100% width and 100% height. This doesn’t work with canvas element (100% is interpreted as 100px). The easiest way to do it is to set the width and height of the canvas element precisely to the pixel width and height of the browser window.
20
Example .attr() is JQuery method for changing an element’s attribute innerWidth & innerHeight attributes are used instead of width and height, because the later are not working properly on all browsers var canvas = $("#myCanvas"); var context = canvas.get(0).getContext("2d"); canvas.attr("width", $(window).get(0).innerWidth); canvas.attr("height", $(window).get(0).innerHeight); context.fillRect(0, 0, canvas.width(), canvas.height());
21
This approach is not really working properly. We see white gap around the canvas, and there are scrollbars in the browser window RESULT:
22
To fix this, we need to use some CSS * { margin: 0; padding: 0; } html, body { height: 100%; width: 100%; } canvas { display: block; } RESULT:
23
Visit : http://www.williammalone.com/articles/html5- canvas-example/ http://www.williammalone.com/articles/html5- canvas-example/
24
Foundation HTML5 Canvas: For Games and Entertainment 1st Edition Author: Rob Hawkes
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.