Detailed explanation of HTML5 canvas (1)-H5 Tutorial-php.cn

Detailed explanation of HTML5 canvas (1)

黄舟

Release： 2017-03-17 15:32:42

Original

3136 people have browsed it

The

canvas element in HTML5 is used to draw graphics on web pages.

Features of Canvas

The Canvas canvas is a rectangular area, each of its pixels can be controlled
Canvas uses JavaScript to Control drawing
Canvas has methods for lines, rectangles, circles and adding images

Usage of Canvas tag

The following The code is to use the canvas screen to draw a 200*200 red rectangle:

<!Doctype html>
<html>
<head>
<title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,200,200);
    </script>
    </body>
    </html>

Copy after login

Save the above code as canvas.html, and set its encoding to utf-8 (otherwise the Chinese will be garbled), and open it with a browser You can see the following effect:
Detailed explanation of HTML5 canvas (1)

<canvas id="myCanvas" width="200"    style="max-width:90%">

Copy after login

HereCreate the Canvas tag and define its id as myCanvas, which is convenient for JavaScript to obtain the tag when drawing Object.
Look at the JavaScript drawing part again:

    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.fillRect(0,0,200,200);

Copy after login

The first sentence, getElementById, gets the canvas object through the ID of the Canvas tag.
The second sentence, getContext, gets the context object.
The third sentence calls the method fillStyle of the Context object, that is, fills its color.
The fourth sentence calls the fillRect method of the Context object to specify the filled area.

Other instances of Canvas

Straight line

<!Doctype html><html><head><title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");    
    var cxt=c.getContext("2d");
    cxt.moveTo(10,10);
    cxt.lineTo(150,50);
    cxt.lineTo(10,50);
    cxt.stroke();</script></body></html>

Copy after login

The running results are as follows:
Detailed explanation of HTML5 canvas (1)

Circle

<!Doctype html>
<html>
<head>
<title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");    
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.beginPath();
    cxt.arc(70,18,15,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();</script></body></html>

Copy after login

The running results As follows:
Detailed explanation of HTML5 canvas (1)

Gradient

<!Doctype html><html><head><title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="200" height="200">
</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>

Copy after login

The effect is as follows:
Detailed explanation of HTML5 canvas (1)

Image

<!Doctype html>
<html>
<head>
<title>我的canvas页面</title>
<meta charset="utf-8"/>
</head>
<body>
<canvas id="myCanvas" width="800" height="600">
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");    
    var cxt=c.getContext("2d");    
    var img=new Image();
    img.src="1.png";
    img.onload=function(e){
        cxt.drawImage(img,0,0);
    }
    cxt.drawImage(img,0,0);
    </script>
    </body>
    </html>

Copy after login

Note, Be sure to add onload event to Img, otherwise the image will not be displayed.
Among them, 1.png is the picture material I found for myself. When you open the page, you can see that the image is displayed in the canvas. My running effect is as follows, the pictures can be found randomly on Baidu, just look at it~~
Detailed explanation of HTML5 canvas (1)

The above is the detailed content of Detailed explanation of HTML5 canvas (1). For more information, please follow other related articles on the PHP Chinese website!