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

青灯夜游

Release： 2018-11-12 18:04:42

Original

6395 people have browsed it

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>

Copy after login

You can easily find the

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

Copy after login

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代码
}

Copy after login

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>

Copy after login

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