Upload
nisa-soomro
View
222
Download
2
Tags:
Embed Size (px)
DESCRIPTION
HTML5 Explaination
Citation preview
Tuesday, April 11, 2023 2
HTML5◦ <canvas> Element◦ Examples ◦ Assignment◦ Practical Tasks
Outlines
Tuesday, April 11, 2023 3
The <canvas> element is used to draw graphics, on the fly, on a web page.
The example shows a red rectangle, a gradient rectangle, a multicolor rectangle, and some multicolor text that is drawn onto the canvas.
HTML5- <canvas>
Tuesday, April 11, 2023 4
The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.
What is Canvas?
Tuesday, April 11, 2023 5
A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element.
The markup looks like this: <canvas id="myCanvas" width="200"
height="100"></canvas>
Note: By default, the <canvas> element has no border and no content.
Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas.
Tip: You can have multiple <canvas> elements on one HTML page.
Create a Canvas
Tuesday, April 11, 2023 6
To add a border, use the style attribute:<canvas id="myCanvas" width="200“ height="100“ style="border:1px solid #000000;"></canvas>
Draw Onto The Canvas With JavaScript<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.fillStyle="#FF0000";ctx.fillRect(0,0,150,75);</script>
Create a Canvas
Tuesday, April 11, 2023 7
First, find the <canvas> element: var c=document.getElementById("myCanvas");
Then, call its getContext() method (you must pass the string "2d" to the getContext() method): var ctx=c.getContext("2d");
The getContext("2d") object is a built-in HTML5 object, with many properties and methods for drawing paths, boxes, circles, text, images, and more.
The next two lines draw a red rectangle: ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
Example explained:
Tuesday, April 11, 2023 8
The fillStyle property can be a CSS color, a gradient, or a pattern. The default fillStyle is #000000 (black).
The fillRect(x,y,width,height) method draws a rectangle filled with the current fill style
Example explained:
Tuesday, April 11, 2023 9
<canvas id="myCanvas" width="200“ height="100“ style="border:1px solid #000000;"></canvas>
Draw Onto The Canvas With JavaScript<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx. strokeStyle="#FF0000";ctx. strokeRect(20,20,150,100);</script>
strokeStyle Property
Tuesday, April 11, 2023 10
The canvas is a two-dimensional grid. The upper-left corner of the canvas has
coordinate (0,0) So, the fillRect() method above had the
parameters (0,0,150,75). This means: Start at the upper-left corner
(0,0) and draw a 150x75 pixels rectangle.
Canvas Coordinates
Tuesday, April 11, 2023 11
To draw straight lines on a canvas, we will use the following two methods:1. moveTo(x,y) defines the starting point of
the line2. lineTo(x,y) defines the ending point of the
lineTo actually draw the line, we must use one of the "ink" methods, like stroke().
Canvas - Paths
Tuesday, April 11, 2023 12
Define a starting point in position (0,0), and an ending point in position (200,100). Then use the stroke() method to actually draw the line:
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.moveTo(0,0);ctx.lineTo(200,100);ctx.stroke();
Example
Tuesday, April 11, 2023 13
To draw a circle on a canvas, we will use the following method:
arc(x,y,r,start,stop) To actually draw the circle, we must use one
of the "ink" methods, like stroke() or fill().
Canvas- Circle
Tuesday, April 11, 2023 14
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);ctx.stroke();
Canvas- Circle-Stroke
Tuesday, April 11, 2023 15
Canvas- Circle-Stroke / Filled
Stroke Fill
<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);ctx.strokeStyle="#FF0000";ctx.stroke();</script>
<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);ctx.fillStyle="#FF0000";ctx.fill();</script>
Tuesday, April 11, 2023 16
Canvas Circle Explanation
Tuesday, April 11, 2023 17
To draw text on a canvas, the most important property and methods are:
font - defines the font properties for text fillText(text,x,y) - Draws "filled" text on
the canvas (x,y Shows the position where to display text)
strokeText(text,x,y) - Draws text on the canvas (no fill)
Canvas - Text
Tuesday, April 11, 2023 18
Write a 30px high filled text on the canvas, using the font "Arial": var
c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.font="30px Arial";ctx.fillText("Hello World",10,50);
Canvas – Text Using fillText():
Tuesday, April 11, 2023 19
Write a 30px high text (no fill) on the canvas, using the font "Arial":
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.font="30px Arial";ctx.strokeText("Hello World",10,50);
Canvas – Text Using strokeText():
Tuesday, April 11, 2023 20
Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas are not limited to solid colors.
There are two different types of gradients: 1.createLinearGradient(x,y,x1,y1) – Creates a linear gradient 2.createRadialGradient(x,y,r,x1,y1,r1) – Creates a radial/circular gradient
Once we have a gradient object, we must add two or more color stops.
Canvas - Gradients
Tuesday, April 11, 2023 21
The addColorStop() method specifies the color stops, and its position along the gradient. Gradient positions can be anywhere between 0 to 1.
To use the gradient, set the fillStyle or strokeStyle property to the gradient, and then draw the shape, like a rectangle, text, or a line.
Canvas - Gradients
Tuesday, April 11, 2023 22
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");
// Create gradientvar grd=ctx.createLinearGradient(0,0,200,0);grd.addColorStop(0,"red");grd.addColorStop(1,"white");
// Fill with gradientctx.fillStyle=grd;ctx.fillRect(10,10,150,80);
Using createLinearGradient():Horizontal Gradient Effect
Tuesday, April 11, 2023 23
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");
// Create gradientvar grd=ctx.createLinearGradient(0,0,0,200);grd.addColorStop(0,"red");grd.addColorStop(1,"white");
// Fill with gradientctx.fillStyle=grd;ctx.fillRect(10,10,150,80);
Using createLinearGradient():Vertical Gradient Effect
Tuesday, April 11, 2023 24
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");
// Create gradientvar grd=ctx.createLinearGradient(0,0,200,200);grd.addColorStop(0,"red");grd.addColorStop(1,“black");
// Fill with gradientctx.fillStyle=grd;ctx.fillRect(10,10,150,80);
Using createLinearGradient():Diagonal Gradient Effect
Tuesday, April 11, 2023 25
Create a radial/circular gradient. Fill rectangle with the gradient:
var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");
// Create gradientvar grd=ctx.createRadialGradient(75,50,5,90,60,100);grd.addColorStop(0,"red");grd.addColorStop(1,"white");
// Fill with gradientctx.fillStyle=grd;ctx.fillRect(10,10,150,80);
Using createRadialGradient():
Tuesday, April 11, 2023 26
<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");
var gradient=ctx.createLinearGradient(0,0,170,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red");// Fill with gradientctx.strokeStyle=gradient;ctx.lineWidth=5;ctx.strokeRect(20,20,150,100);</script>
Stroke Gradient Rectangle
Tuesday, April 11, 2023 27
<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.font="30px Verdana";// Create gradientvar gradient=ctx.createLinearGradient(0,0,c.width,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red");// Fill with gradientctx.strokeStyle=gradient;ctx.strokeText("QUEST Nawabshah !",5,80);</script>
Stroke Gradient on Text
Tuesday, April 11, 2023 28
<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.font="30px Verdana";// Create gradientvar gradient=ctx.createLinearGradient(0,0,c.width,0);gradient.addColorStop("0","magenta");gradient.addColorStop("0.5","blue");gradient.addColorStop("1.0","red");// Fill with gradientctx.fillStyle=gradient;ctx.fillText("QUEST Nawabshah !",5,80);</script>
Stroke Gradient on Text
Tuesday, April 11, 2023 29
What is Canvas? What is purpose of canvas? What are advantages and disadvantages of
Canvas?
Assignments
Tuesday, April 11, 2023 30
Draw a Rectangle with following effect1. stroke 2. Fill
Draw a Rectangle with following effect 1. Stroke Gradient
2. Stroke Fill Gradient
Practical Tasks
Tuesday, April 11, 2023 31
Draw a Circle with following effect1. Stroke 2. Fill
Write AnyText with following effect 1. Stroke Gradient
2. Stroke Fill Gradient3. Stroke4. Fill
Practical Tasks
Tuesday, April 11, 2023 32
Draw a Rectangle with Fill and stroke having following effects1. Linear Gradient
1. Horizontal, vertical and Diagonal Effect
2. Radial Gradient
Practical Tasks
Tuesday, April 11, 2023 33
Creative Tasks
Tuesday, April 11, 2023 34
Creative Tasks
Tuesday, April 11, 2023 35
The shadowColor property sets or returns the color to use for shadows.
Note: Use the shadowColor property together with the shadowBlur property to create a shadow.Tip: Adjust the shadow by using the shadowOffsetX and shadowOffsetY properties.
Canvas-Shadow Color
Tuesday, April 11, 2023 36
<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.shadowBlur=20;ctx.shadowColor="black";ctx.fillStyle="red";ctx.fillRect(20,20,100,80);</script>
Canvas-Shadow Color Example
Tuesday, April 11, 2023 37
<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.shadowBlur=35;ctx.shadowColor="black";ctx.fillStyle="white";ctx.fillRect(20,20,100,80);</script>
Canvas-Shadow Color Example
Tuesday, April 11, 2023 38
<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.shadowBlur=20;ctx.fillStyle="red";ctx.shadowColor="black";ctx.fillRect(20,20,100,80);ctx.shadowColor="blue";ctx.fillRect(140,20,100,80);</script>
Canvas-Shadow Color Example
Tuesday, April 11, 2023 39
The shadowOffsetX property sets or returns the horizontal distance of the shadow from the shape.
shadowOffsetX=0 indicates that the shadow is right behind the shape.
shadowOffsetX=20 indicates that the shadow starts 20 pixels to the right (from the shape's left position).
shadowOffsetX=-20 indicates that the shadow starts 20 pixels to the left (from the shape's left position).
canvas shadowOffsetX Property
Tuesday, April 11, 2023 40
<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.shadowBlur=10;ctx.shadowOffsetX=10;ctx.shadowColor="black";ctx.fillStyle="red";ctx.fillRect(20,20,100,80);</script>
canvas shadowOffsetX PropertyExample
Tuesday, April 11, 2023 41
ctx.shadowOffsetX=0;
ctx.shadowOffsetX=-10;
ctx.shadowOffsetX=10;
ctx.shadowOffsetX=50;
canvas shadowOffsetX PropertyExample
Tuesday, April 11, 2023 42
The shadowOffsetY property sets or returns the vertical distance of the shadow from the shape.
shadowOffsety=0 indicates that the shadow is right behind the shape.
shadowOffsetY=20 indicates that the shadow starts 20 pixels below the shape's top position.
shadowOffsetY=-20 indicates that the shadow starts 20 pixels above the shape's top position.
canvas shadowOffsetY Property
Tuesday, April 11, 2023 43
<script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.shadowBlur=10;ctx.shadowOffsetY=20;ctx.shadowColor="black";ctx.fillStyle="red";ctx.fillRect(20,20,100,80);</script>
canvas shadowOffsetY PropertyExample
Tuesday, April 11, 2023 44
ctx.shadowOffsetY=0;
ctx.shadowOffsetY=-10;
ctx.shadowOffsetY=10;
ctx.shadowOffsetY=50;
canvas shadowOffsetY PropertyExample
Tuesday, April 11, 2023 45
Apply Horizontal and Vertical shadow properties on the shapes which are given in practical task of <canvas>
Practical Tasks
Tuesday, April 11, 2023 46
http://www.w3schools.com/tags/ref_canvas.asp
http://www.w3schools.com/html/default.asp
References