HTML 5 Canvas
The canvas element is used to draw graphics on web pages.
What is Canvas?
HTML5’s canvas element uses JavaScript to draw images on a web page.
The canvas is a rectangular area that you can control every pixel of.
canvas has many ways to draw paths, rectangles, circles, characters, and add images.
Create Canvas Element
Add canvas element to HTML5 page.
Specify the id, width and height of the element:
<canvas id="myCanvas" width="200" height="100"></canvas>
Draw through JavaScript
The canvas element itself has no drawing capabilities. All drawing work must be done inside JavaScript:
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>JavaScript uses id to find the canvas element:
var c=document.getElementById("myCanvas");
Then, create the context object:
var cxt=c.getContext("2d");
getContext("2d") object is a built-in HTML5 object that has Multiple ways to draw paths, rectangles, circles, characters, and add images.
The following two lines of code draw a red rectangle:
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
The fillStyle method dyes it red, and the fillRect method specifies the shape, position and size.
Understanding coordinates
The fillRect method above has parameters (0,0,150,75).
Means: Draw a 150x75 rectangle on the canvas, starting from the upper left corner (0,0).
As shown in the figure below, the X and Y coordinates of the canvas are used to position the painting on the canvas.
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body
{
font-size:70%;
font-family:verdana,helvetica,arial,sans-serif;
}
</style>
<script type="text/javascript">
function cnvs_getCoordinates(e)
{
x=e.clientX;
y=e.clientY;
document.getElementById("xycoordinates").innerHTML="Coordinates: (" + x + "," + y + ")";
}
function cnvs_clearCoordinates()
{
document.getElementById("xycoordinates").innerHTML="";
}
</script>
</head>
<body style="margin:0px;">
<p>把鼠标悬停在下面的矩形上可以看到坐标：</p>
<div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()"></div>
<br />
<br />
<br />
<div id="xycoordinates"></div>
</body>
</html>Example - Circle
Draw a circle by specifying the size, color and position:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#00ff00";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
</body>
</html>canvas element:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
Example - Gradient
Draw a gradient background using the color you specify:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
</body>
</html>Example - Image
Place an image to On canvas:
<!DOCTYPE HTML>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="http://image75.360doc.com/DownloadImg/2014/06/1301/42548176_7.jpg"
cxt.drawImage(img,0,0);
</script>
</body>
</html>