Introduction to canvas

HTML5 is an emerging web technology standard

At present, almost all major browsers (FireFox, Chrome, Opera, Safari, IE9+) have begun to support html5 except for IE8 and below.

As we all know, many new features have been added in html5. Among the many features of html5, Canvas should be regarded as one of the most striking new features. We use the Canvas object of html5 to draw graphics directly on the web page of the browser. This means that browsers can display graphics or animations directly on web pages without third-party plug-ins such as Flash.

Now, let's introduce how to use HTML5 Canvas to draw basic graphics for HTML5 beginners.

First, we need to prepare the following html basic code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas Getting Started Example</title>
</head>
<body>

</body>
</html>

The above code is a basic code template for an html5 page.

Among them, the first line of code <!DOCTYPE html>is a document type tag instruction, which is also a standard document type instruction for html5 pages, which is used to tell the browser "this is an html5 page, please parse and display the page according to the html5 web page standard".

The fourth line of code <meta charset="UTF-8">is used to tell the browser that "the character encoding of this html5 page is UTF-8", which is also the standard way of setting the character encoding of html5 pages. This is different from the previous html character encoding instructions.

<!-- The previous html character encoding instructions are as follows -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

Now, let's explain the example of Canvas drawing graphics in the html file containing the above code. bodyFirst, we add the following canvas tag to the part of the above html code .

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas Getting Started Example</title>
</head>
<body>
<!-- Add a canvas tag and add a red border to view the effect on the page-->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
Your browser does not support the canvas tag.
</canvas>
</body>
</html>

At this point, we open the page with a browser that supports html5, and we will see the following:

Canvas label display effect

In html5, the canvas tag itself does not have any behavior, it just occupies a specified size of blank space on the page. The canvas tag is equivalent to a blank canvas, and we also need to use the canvas API provided by JavaScript to write the corresponding code to draw the graphics we want on this canvas.

Note: The text content in the canvas tag will be displayed in browsers that do not support html5. as above
As shown in the above html code, if your browser does not support the html5 canvas tag, it will be displayed in the canvas tag
文字「您的浏览器不支持canvas标签」。

作为「画家」的我们，首先需要熟悉我们手中的画笔，也就是JavaScript中的Canvas对象及其相关内容。

在html5中，一个canvas标签就对应一个Canvas对象，我们在JavaScript可以使用document.getElementById()等常规函数来获取该对象。值得注意的是，在JavaScript中，我们并不是直接操作Canvas对象，而是通过Canvas对象来获取对应的图形绘制上下文对象CanvasRenderingContext2D，然后我们再利用CanvasRenderingContext2D对象自带的许多绘制图形的函数来绘图。

这就好像是每一张画布都对应一支画笔，要想在画布上绘画，我们就先要拿到对应的画笔，然后使用这支画笔在画布上绘图。CanvasRenderingContext2D对象就相当于这支画笔。现在，我们就先来尝试在JavaScript中拿到这支画笔。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas绘制线条入门示例</title>
</head>
<body>
<!-- 添加canvas标签，并加上红色边框以便于在页面上查看效果 -->
<canvas id="myCanvas" width="400px" height="300px" style="border: 1px solid red;">
您的浏览器不支持canvas标签。
</canvas>
<script type="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//Simply detect whether the current browser supports Canvas objects, so as to avoid syntax errors in some browsers that do not support html5
if(canvas.getContext){
    //Get the corresponding CanvasRenderingContext2D object (brush)
    var ctx = canvas.getContext("2d");
}
</script>
</body>
</html>

As shown in the above code, we can use Canvasthe getContext()methods of the object to get the CanvasRenderingContext2Dobject. The more attentive readers should have noticed: the getContext()method needs to pass in a string -- 2d, and CanvasRenderingContext2Dthe name of the obtained object also has 2D in it. This is because html5 currently only supports 2D drawing, but 3D or other forms of drawing may also be supported in future html5. At that time, we may need to use getContext("3d")to get CanvasRenderingContext3Dobjects and draw 3D graphics.

Note: [① Math . PI is a constant representing π in JavaScript, Math . PI / 2 is 90°, Math . PI* 2 is 360° ]

Introduction to canvas

Guess you like