HTML5 Canvas
The <canvas> element is used to draw
graphics, on the fly, on a web page.
What is Canvas?
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.
Browser Support
Internet Explorer 9+, Firefox, Opera, Chrome, and
Safari support the <canvas> element. Note: Internet Explorer 8 and
earlier versions, do not support the <canvas> element.
Create a Canvas
A canvas is a rectangular area on an HTML page,
and it is specified with the <canvas> element.
Note: By default, the <canvas> element has
no border and no content.
Note: 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.
EXAMPLE:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"
width="200" height="100" style="border:1px solid
#000000;">
Your browser does not support the HTML5 canvas
tag.
</canvas>
</body>
</html>
----------------------------------------------
Draw Onto The Canvas With JavaScript
All drawing on the canvas must be done inside a
JavaScript:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas"
width="200" height="100" style="border:1px solid
#c3c3c3;">
Your browser does not support the HTML5 canvas
tag.
</canvas>
<script>
var
c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>
</body>
</html>
------------------------------------------------------------------------
Create a circle with the arc() method:
var
c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
------------------------------------------------------------
Canvas - Text
var
c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
-------------------------------------------------------------------
Canvas - Gradients
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:
createLinearGradient(x,y,x1,y1) - Creates a
linear gradient
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.
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.
Using createLinearGradient():
var
c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);
------------------------------------------------------------------
Canvas - Images
To draw an image on a canvas, we will use the
following method:
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream"
src="img_the_scream.jpg" alt="The Scream"
width="220" height="277"><p>Canvas:</p>
<canvas id="myCanvas"
width="250" height="300" style="border:1px solid
#d3d3d3;">
Your browser does not support the HTML5 canvas
tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var
img=document.getElementById("scream");
ctx.drawImage(img,10,10);
</script>
</body>
</html>
No comments:
Post a Comment