search

Home >Web Front-end >H5 Tutorial >What is the role of the Canvas element in html5? Simple use of

What is the role of the Canvas element in html5? Simple use of

青灯夜游
青灯夜游Original
2018-11-12 18:04:426416browse

The content of this article is to introduce what the Canvas element of html5 does? The simple use of ; let everyone know how to draw a rectangle using has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

The element in HTML5 provides you with a simple and powerful way to draw graphics using JavaScript. It can be used for drawing graphics, compositing photos or doing simple (and not so simple) animations. [Related video tutorial recommendation: HTML5Tutorial]

is a simple element with only two specific attributes "width" and "height" and all core HTML5 attributes. Such as id, name and class, etc. 

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

You can easily find the element in the DOM using the getElementById() method like this: 

var canvas = document.getElementById("mycanvas");

Rendering Context

The is initially blank, in order to display something the script first needs to access the rendering context and draw on it.

The canvas element has a DOM method named getContext() method, which has the function of obtaining the rendering context and its drawing. This function takes one parameter, which is the type of context2d.

Here is the code to get the required context and check if the browser supports the element

var canvas  = document.getElementById("mycanvas");
if (canvas.getContext) {   
   var ctx = canvas.getContext(&#39;2d&#39;);   
   // 此处是绘图代码
} else {   
   // 此处不支持canvas代码
}

Example of canvas: Drawing a rectangle

<!DOCTYPE HTML><html>
   <head>
   
      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      
      <script type = "text/javascript">
         function drawShape() {
            
            // 使用DOM获取画布元素
            var canvas = document.getElementById(&#39;mycanvas&#39;);

            // 确保在不支持 canvas 时不执行
            if (canvas.getContext) {
               
               // 使用 getContext 来执行 canvas 绘制
               var ctx = canvas.getContext(&#39;2d&#39;);

               // 画形状
               ctx.fillRect(25,25,100,100);
               ctx.clearRect(45,45,60,60);
               ctx.strokeRect(50,50,50,50);
            } else {
               alert(&#39;你需要使用Safari或Firefox 1.5+的浏览器才能看到此演示。&#39;);
            }
         }
      </script>
   </head>
   
   <body id = "test" onload = "drawShape();">
      <canvas id = "mycanvas"></canvas>
   </body>
	</html>

Rendering:

What is the role of the Canvas element in html5? Simple use of <Canvas>

Description:

There are three ways to draw a rectangle on the canvas:

What is the role of the Canvas element in html5? Simple use of <Canvas>

Here x and y specify the position of the upper left corner of the rectangle on the canvas (relative to the origin), and width and height are the width and height of the rectangle.

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

The above is the detailed content of What is the role of the Canvas element in html5? Simple use of . 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：What is the character encoding? How to set character encoding in html5?Next article：What is the character encoding? How to set character encoding in html5?

Related articles

See more