Home > Article > Web Front-end > 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:426322browse

The content of this article is to introduce what the Canvas element of html5 does? The simple use of

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

You can easily find the

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

Rendering Context

The

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

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

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?

See more

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

Related articles