How to use HTML5 canvas_html5 tutorial skills

The

canvas element uses JavaScript to draw images on the web page and has no drawing capabilities.

Canvas is a rectangular area that can be controlled every pixel.

canvas has many ways to draw paths, rectangles, circles, characters, and add images.

Here are some examples:

1. Fill the canvas

JavaScript CodeCopy content to clipboard

1. "myCanvas" width="200" height="100" style="border:1px solid red;">
2. >
3. var c=document.getElementById("myCanvas");
4. var cxt=c.getContext("2d");
5. cxt.fillStyle="#ccc";
6. cxt.fillRect(5,10,150,60); //x, y, x, y

Execute as follows:

2. Get coordinates

JavaScript CodeCopy content to clipboard

1. > 
2. function cnvs_getCoordinates(e){
3. x=e.clientX;
4. y=e.clientY;
5. document.getElementById("xycoordinates").innerHTML="Coordinates: (" x "," y ")"; }
6. function cnvs_clearCoordinates(){
7. document.getElementById("xycoordinates").innerHTML="";}

XML/HTML CodeCopy content to clipboard

1. div id="coordiv" style="float:left;width:199px;height:99px;border:1px solid #c3c3c3" onmousemove="cnvs_getCoordinates(event)" onmouseout="cnvs_clearCoordinates()">div>
2. div id="xycoordinates" >div>

Execute as follows:

3. Draw lines and graphics

1) Draw a square as follows:

JavaScript CodeCopy content to clipboard

1. "myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
2. Your browser does not support the canvas tag.
5. >
7. var c=document.getElementById("myCanvas");
8. var cxt=c.getContext("2d");
9. cxt.moveTo(10,10); //x,y starting point
10. cxt.lineTo(10,50); //x,y
11. cxt.lineTo(50,50); //x,y
12. cxt.lineTo(50,10); //x,y
13. cxt.lineTo(10,10); //x,y
14. cxt.stroke();

Execute as follows

2) Draw a circle as follows:

JavaScript CodeCopy content to clipboard

1. "myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
2. Your browser does not support canvas
5. >
6. var c=document.getElementById("myCanvas");
7. var cxt=c.getContext("2d");
8. cxt.fillStyle="#ccc";
9. cxt.beginPath();
10. cxt.arc(20,20,10,0,Math.PI*2,true);
11. cxt.closePath();
12. cxt.fill();

Execute as follows:

4. Draw gradient

JavaScript CodeCopy content to clipboard

1. "myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
2. Your browser does not support the canvas tag.
5. >
6. var c=document.getElementById("myCanvas");
7. var cxt=c.getContext("2d");
8. var grd=cxt.createLinearGradient(0,0,175,50);
9. grd.addColorStop(0,"#000000"); //Black
10. grd.addColorStop(1,"#FFFFFF"); //White
11. cxt.fillStyle=grd;
12. cxt.fillRect(5,10,175,50);//x,y,x,y

Execute as follows:

5. Pictures

JavaScript CodeCopy content to clipboard

1. "myCanvas" width="300" height="200" style="border:1px solid #c3c3c3;">
2. Your browser does not support the canvas tag.
5. >
6. var c=document.getElementById("myCanvas");
7. var cxt=c.getContext("2d");
8. var img=new Image()
9. img.src="aa.png"
10. cxt.drawImage(img,10,20); //x,y

The execution is as follows:

The above is the entire content of this article, I hope it will be helpful to everyone’s study.

Original text: http://www.cnblogs.com/LoveSuk/archive/2016/03/17/5288368.html