Home > Article > Web Front-end > Detailed explanation of HTML5 canvas (1)

Detailed explanation of HTML5 canvas (1)

黄舟Original: 2017-03-17 15:32:423117browse

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>

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%">

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);

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>

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>

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>

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of HTML5's pushstate and popstate operation history to change the current url code example without refreshingNext article：Detailed explanation of HTML5's pushstate and popstate operation history to change the current url code example without refreshing

See more