Presentation is loading. Please wait.

Presentation is loading. Please wait.

Programming Club IIT Kanpur

Published byDortha Howard Modified over 9 years ago

Similar presentations

Presentation on theme: "Programming Club IIT Kanpur"— Presentation transcript:

1 Programming Club IIT Kanpur
HTML5 Canvas and PHP Programming Club IIT Kanpur

2 The canvas tag Similar to the <div>, <a>, or <table> tag, with the exception that its contents are rendered with JavaScript The canvas context is an object with properties and methods that you can use to render graphics inside the canvas element.  The context can be 2d or webgl (3d).

3 Canvas Template <body>   <canvas id="myCanvas" width="578" height="200"></canvas>   <script>     var canvas = document.getElementById('myCanvas');     var context = canvas.getContext('2d');     // do stuff here   </script> </body>

4 Line use the beginPath(), moveTo(), lineTo(), and stroke() methods
beginPath() - to declare that we are about to draw a new path moveTo() - to position the context point (i.e. Starting point), lineTo() -  to draw a straight line from the starting position to a new position stroke() - to make the line visible i.e fill color in the line

5 Line <body>     <canvas id="myCanvas" width="578" height="200"></canvas>     <script>       var canvas = document.getElementById('myCanvas');       var context = canvas.getContext('2d');       context.beginPath();       context.moveTo(100, 150);       context.lineTo(450, 50);       context.stroke();     </script>   </body>

6 Properties of Line Line Width - context.lineWidth = 15;  Must be set before stroke() function Line Color – context.strokeStyle = '#ff0000'; Line Cap – Can be round, square or butt. Specified by context.lineCap = 'round';

7 Arc Arcs are defined by a center point, a radius, a starting angle, an ending angle, and the drawing direction (either clockwise or anticlockwise). Angle should be in radians Arcs can be styled with the lineWidth, strokeStyle, and lineCap properties

8 Arc <body>     <canvas id="myCanvas" width="578" height="250"></canvas>     <script>       var canvas = document.getElementById('myCanvas');       var context = canvas.getContext('2d');       var x = canvas.width / 2;       var y = canvas.height / 2;       var radius = 75;       var startAngle = 1.1 * Math.PI;       var endAngle = 1.9 * Math.PI;       var counterClockwise = false;       context.beginPath();       context.arc(x, y, radius, startAngle, endAngle, counterClockwise);       context.lineWidth = 15;       context.strokeStyle = 'black';       context.stroke();     </script>   </body>

9 Quadratic Curve Use the quadraticCurveTo() method
Quadratic curves can be styled with the lineWidth, strokeStyle, and lineCap properties

10 Quadratic Curve Context Point is soecified by the context.moveTo() function QuadraticCurveTo() function takes 4 arguments-     the x co-ordinate of the control point     the y co-ordinate of the control point     the x co-ordinate of the end point     the y co-ordinate of the end point

11 Quadratic Curve <body>     <canvas id="myCanvas" width="578" height="200"></canvas>     <script>       var canvas = document.getElementById('myCanvas');       var context = canvas.getContext('2d');       context.beginPat1h();       context.moveTo(188, 150);       context.quadraticCurveTo(288, 0, 388, 150);       context.lineWidth = 10;       context.strokeStyle = 'black';       context.stroke();     </script>   </body>

12 Path To create a path with HTML5 Canvas, we can connect multiple subpaths.  The ending point of each new subpath becomes the new context point.   We can use the lineTo(), arcTo(), quadraticCurveTo(), and bezierCurveTo() methods to construct each subpath which makes up our path.  We can also use the beginPath() method each time we want to start drawing a new path.

13 Path canvas id="myCanvas" width="578" height="200"></canvas>     <script>       var canvas = document.getElementById('myCanvas');       var context = canvas.getContext('2d');       context.beginPath();       context.moveTo(100, 20);       // line 1       context.lineTo(200, 160);       // quadratic curve       context.quadraticCurveTo(230, 200, 250, 120);       // bezier curve       context.bezierCurveTo(290, -40, 300, 200, 400, 150);       // line 2       context.lineTo(500, 90);       context.lineWidth = 5;       context.strokeStyle = 'blue';       context.stroke();     </script>

14 Joining Lines To set the line join style of an HTML5 Canvas path, we can set the lineJoin context property Paths can have one of three line joins: miter, round, or bevel Unless otherwise specified, the HTML5 Canvas line join property is defaulted with the miter style

15 Joining Lines <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // set line width for all lines context.lineWidth = 25; // round line join (middle) context.beginPath(); context.moveTo(239, 150); context.lineTo(289, 50); context.lineTo(339, 150); context.lineJoin = 'round'; context.stroke(); </script>

16 Rounded Corners we  use the arcTo() method which is defined by a control point, an ending point, and a radius.

17 Rounded Corners <script>       var canvas = document.getElementById('myCanvas');       var context = canvas.getContext('2d');       var rectWidth = 200;       var rectHeight = 100;       var rectX = 189;       var rectY = 50;       var cornerRadius = 50;       context.beginPath();       context.moveTo(rectX, rectY);       context.lineTo(rectX + rectWidth - cornerRadius, rectY);       context.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius);       context.lineTo(rectX + rectWidth, rectY + rectHeight);       context.lineWidth = 5;       context.stroke();     </script>

18 Custom Shape To create a custom shape with HTML5 Canvas, we can create a path and then close it using the closePath() method. We can use the lineTo(), arcTo(), quadraticCurveTo(), or bezierCurveTo() methods to construct each subpath which makes up our shape

19 Custom Path <script>       var canvas = document.getElementById('myCanvas');       var context = canvas.getContext('2d');       // begin custom shape       context.beginPath();       context.moveTo(170, 80);       context.bezierCurveTo(130, 100, 130, 150, 230, 150);       context.bezierCurveTo(250, 180, 320, 180, 340, 150);       context.bezierCurveTo(420, 150, 420, 120, 390, 100);       context.bezierCurveTo(430, 40, 370, 30, 340, 50);       context.bezierCurveTo(320, 5, 250, 20, 250, 50);       context.bezierCurveTo(200, 5, 150, 20, 170, 80);       // complete custom shape       context.closePath();       context.lineWidth = 5;       context.strokeStyle = 'blue';       context.stroke();

20 Rectangle we can use the rect() method rather than constructing the shape with 4 connecting lines. rectangle is positioned with x and y parameters, and is sized with width and height parameters. The rectangle is positioned about its top left corner.

21 Rectangle <script>       var canvas = document.getElementById('myCanvas');       var context = canvas.getContext('2d');       context.beginPath();       context.rect(188, 50, 200, 100);       context.fillStyle = 'yellow';       context.fill();       context.lineWidth = 7;       context.strokeStyle = 'black';       context.stroke();     </script>

22 Circle We  create a full arc using the arc() method by defining the starting angle as 0 and the ending angle as 2 * PI

23 Color Filling To fill an HTML5 Canvas shape with a solid color, we can set the fillStyle property to a color. then we can use the fill() method to fill the shape. When setting both the fill and stroke for a shape, make sure that you use fill() before stroke(). Otherwise, the fill will overlap half of the stroke

24 Filling Color <script>       var canvas = document.getElementById('myCanvas');       var context = canvas.getContext('2d');       // begin custom shape       context.beginPath();       context.moveTo(170, 80);       context.bezierCurveTo(130, 100, 130, 150, 230, 150);       context.bezierCurveTo(250, 180, 320, 180, 340, 150);       context.bezierCurveTo(420, 150, 420, 120, 390, 100);       context.bezierCurveTo(430, 40, 370, 30, 340, 50);       context.bezierCurveTo(320, 5, 250, 20, 250, 50);       context.bezierCurveTo(200, 5, 150, 20, 170, 80);       // complete custom shape       context.closePath();       context.lineWidth = 5;       context.fillStyle = '#8ED6FF';       context.fill();       context.strokeStyle = 'blue';       context.stroke();     </script>

25 Drawing Image To draw an image using HTML5 Canvas, we use the drawImage() method which requires an image object and a destination point. The destination point defines the top left corner of the image relative to the top left corner of the canvas.       var imageObj = new Image();       imageObj.onload = function() {         context.drawImage(imageObj, 69, 50);       };       imageObj.src = '

26 Image Size we add two additional arguments to the drawImage() method, width and height       var width = 200;       var height = 137;       var imageObj = new Image();       imageObj.onload = function() {         context.drawImage(imageObj, x, y, width, height);       };

27 Crop an Image We add six additional arguments to the drawImage() method, sourceX, sourceY, sourceWidth, sourceHeight, destWidth and destHeight.

28 Text To draw text using HTML5 Canvas, we can use the font property and the fillText() method of the canvas context. To set the font, size, and style of HTML5 Canvas text, we set the font property of the canvas context to a string containing the font style, size, and family, delimited by spaces. Once the font property has been set, we can draw the text with the fillText() method, which requires a string and an x and y position

29 Text <script>       var canvas = document.getElementById('myCanvas');       var context = canvas.getContext('2d');       context.font = 'italic 40pt Calibri';       context.fillText('Hello World!', 150, 100);     </script>

30 Properties Of Text TO change text color, set context.fillStyle = "color" TO change stroke color, set  context.strokeStyle = "color" To align text, use context.textAlign = "center". can be set to start, end, left, center, or right. When it's set to start and the document direction is ltr (left to right), or when it's set to end and the document direction is rtl (right to left).

31 Snake GAME Let's make simple snake game using the tools we have learnt.

32 HTML <html> <canvas id="canvas" width="450" height="450"></canvas> </html>

33 Initializing the canvas
var canvas = document.getElementById('canvas'); context = canvas.getContext("2d"); var w = canvas.width(); var h = canvas.height();

34 Painting the canvas context.fillStyle= "white"; context.fillRect(0 , 0, w, h); context.strokeStyle = "black"; context.strokeRect(0, 0, w, h);

35 Creating the snake create_snake();     function create_snake()     {         var length = 5; //Length of the snake         snake_array = []; //Empty array to start with         for(var i = length-1; i>=0; i--)         {             //This will create a horizontal snake starting from the top left             snake_array.push({x: i, y:0});         }     }

36 Painting the snake var cw = 10;//cell width function paint() { for(var i = 0; i < snake_array.length; i++) { var c = snake_array[i]; //Lets paint 10px wide cells context.fillStyle = "blue"; context.fillRect(c.x*cw , c.y*cw, cw, cw); context.strokeStyle = "white"; context.strokeRect(c.x*cw , c.y*cw, cw, cw); } }

37 Moving the snake game_loop = setInterval(paint, 60); //put the following lines inside the paint function //Pop out the tail cell and place it infront of the head cell var nx = snake_array[0].x; var ny = snake_array[0].y; //These were the position of the head cell. //We will increment it to get the new head position nx++; var tail = snake_array.pop(); //pops out the last cell tail.x = nx; snake_array.unshift(tail); //puts back the tail as the first cell

38 Leaving a trail After every 60ms, paint() function will create new rectangles but not delete the previous ones. This will leave a trail of the movement of the snake. To fix it, we paint the background of the canvas inside the paint() function.

39 Direction Based Movement
var d = "right"; //default direction //add the following lines in the paint function if(d == "right") nx++;         else if(d == "left") nx--;         else if(d == "up") ny--;         else if(d == "down") ny++;

40 Keyboard Controls document.onkeydown = function(e){         var key = e.which;          if(key == "37" && d != "right ") d = "left";         else if(key == "38" && d != "down ") d= " up";         else if(key == "39" && d != "left ") d= " right";         else if(key == "40" && d != "up") d= " down";     };

41 Game init function function init()     {         d = "right"; //default direction         create_snake();         create_food();                  game_loop = setInterval(paint, 60);     }

42 Game Over Condition if(nx == -1 || nx = w/cw || ny == -1 || ny = h/cw)         {             //restart game             init();             return;         }

43 Lets Create food now function create_food()     {         food = {             x: Math.random()*(w-cw)/cw,             y: Math.random()*(h-cw)/cw,         };         //This will create a cell with x/y between         //Because there are 45(450/10) positions accross the rows and columns     }

44 A function to paint cells
function paint_cell(x, y) { context.fillStyle= "blue"; contetx.fillRect(x*cw, y*cw, cw, cw); context.strokeStyle= "white"; context.strokeRect(x*cw, y*cw, cw, cw); } //Now even while painting snake, we can use this function

45 Paint food //inside the paint function var food; create_food; paint_cell(food.x, food.y)

46 Eating food //If the new head position matches with that of the food,         //Create a new head instead of moving the tail         if(nx == food.x && ny == food.y)         {             var tail = {x: nx, y: ny};             //Create new food             create_food();         }         else         {             var tail = snake_array.pop(); //pops out the last cell             tail.x = nx; tail.y = ny;         }

47 Checking Body Collision
function check_collision(x, y, array)     {         //This function will check if the provided x/y coordinates exist         //in an array of cells or not         for(var i = 0; i < array.length; i++)         {             if(array[i].x == x && array[i].y == y)              return true;         }         return false;     }

48 Checking Collision Addone more condition for game over in the paint function.- if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array )) { //restart game init(); return; }

49 And we are done! Congratulations on Making Your first game. Simple, wasn't it?

Download ppt "Programming Club IIT Kanpur"

Similar presentations

HTML5 CANVAS.  Rectangles  Arcs  Lines  Features we won’t look at  Images  Drag and drop  Animation  Widely supported DRAWING PICTURES IN HTML.

HTML5 CANVAS.  Rectangles  Arcs  Lines  Features we won’t look at  Images  Drag and drop  Animation  Widely supported DRAWING PICTURES IN HTML.
CHAPTER 20 CREATING SVG GRAPHICS. LEARNING OBJECTIVES How to embed a graphic stored within a.SVG file in an HTML page How to use the and tag pair to specify.

CHAPTER 20 CREATING SVG GRAPHICS. LEARNING OBJECTIVES How to embed a graphic stored within a.SVG file in an HTML page How to use the and tag pair to specify.
Graphics You draw on a Graphics object The Graphics object cannot directly be created by your code, instead one is generated when the method paintComponent.

Graphics You draw on a Graphics object The Graphics object cannot directly be created by your code, instead one is generated when the method paintComponent.
Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.

Cascading Style Sheets. CSS stands for Cascading Style Sheets and is a simple styling language which allows attaching style to HTML elements. CSS is a.
Chapter 3 Drawing and Composing an Illustration. Objectives Draw straight lines Draw curved lines Draw elements of an illustration Apply attributes to.

Chapter 3 Drawing and Composing an Illustration. Objectives Draw straight lines Draw curved lines Draw elements of an illustration Apply attributes to.
Using Bitmap graphics Having looked at vector graphics in the canvas, we will now look at using bitmap graphics.

Using Bitmap graphics Having looked at vector graphics in the canvas, we will now look at using bitmap graphics.
Neal Stublen Why Use a Canvas?  Flexibility… Use of drawing primitives (lines, arcs, text) Direct access to element display pixels.

Neal Stublen Why Use a Canvas?  Flexibility… Use of drawing primitives (lines, arcs, text) Direct access to element display pixels.
HTML 5 Previous version: HTML4.01, 1999 Still work in progress, most browsers support some of it.

HTML 5 Previous version: HTML4.01, 1999 Still work in progress, most browsers support some of it.
1 L38 Graphics and Java 2D™ (3). 2 OBJECTIVES In this chapter you will learn:  To understand graphics contexts and graphics objects.  To understand.

1 L38 Graphics and Java 2D™ (3). 2 OBJECTIVES In this chapter you will learn:  To understand graphics contexts and graphics objects.  To understand.
CS4506. HTML5 The HTML5 specification was developed by the Web Hypertext Application Technology Working Group (WHATWG), which was founded in 2004 by was.

CS4506. HTML5 The HTML5 specification was developed by the Web Hypertext Application Technology Working Group (WHATWG), which was founded in 2004 by was.
Graphics in Android 1 Fall 2012 CS2302: Programming Principles.

Graphics in Android 1 Fall 2012 CS2302: Programming Principles.
CHAPTER 21 INTRODUCING THE HTML 5 CANVAS. LEARNING OBJECTIVES How to create a canvas using the and tag pair How to test if a browser supports canvas operations.

CHAPTER 21 INTRODUCING THE HTML 5 CANVAS. LEARNING OBJECTIVES How to create a canvas using the and tag pair How to test if a browser supports canvas operations.
Canvas, SVG, Workers Doncho Minkov Telerik Corporation www.telerik.com.

Canvas, SVG, Workers Doncho Minkov Telerik Corporation
269200 Web Programming Language Week 13 Ken Cosh HTML 5.

Web Programming Language Week 13 Ken Cosh HTML 5.
CS7026 – HTML5 Canvas. What is the element 2  HTML5 defines the element as “a resolution-dependent bitmap canvas which can be used for rendering graphs,

CS7026 – HTML5 Canvas. What is the element 2  HTML5 defines the element as “a resolution-dependent bitmap canvas which can be used for rendering graphs,
ITP 104.  While you can do things like this:  Better to use styles instead:

ITP 104.  While you can do things like this:  Better to use styles instead:
HTML, HTML5 Canvas, JavaScript PART 3 LOOKING MORE CLOSELY AT FULL BLOWN GAME DESIGN A PATTERNED BACKGROUND (CREATED WTIH LOOPS) WITH A MOVING OBJECT CHALLENGES.

HTML, HTML5 Canvas, JavaScript PART 3 LOOKING MORE CLOSELY AT FULL BLOWN GAME DESIGN A PATTERNED BACKGROUND (CREATED WTIH LOOPS) WITH A MOVING OBJECT CHALLENGES.
Getting Started with Canvas IDIA 618.185 Spring 2013 Bridget M. Blodgett.

Getting Started with Canvas IDIA Spring 2013 Bridget M. Blodgett.
HTML 5 Tutorial Chapter 5 Canvas. Canvas The tag is used to display graphics. The Canvas is a rectangular area we control each and every pixel of it.

HTML 5 Tutorial Chapter 5 Canvas. Canvas The tag is used to display graphics. The Canvas is a rectangular area we control each and every pixel of it.
HTML5 CANVAS. SAVING INFORMATION BETWEEN FUNCTION CALLS.

HTML5 CANVAS. SAVING INFORMATION BETWEEN FUNCTION CALLS.

Similar presentations

Ads by Google