html5에서 Canvas 요소의 역할은 무엇입니까? <캔버스>의 간단한 사용-H5 튜토리얼-php.cn

html5에서 Canvas 요소의 역할은 무엇입니까? <캔버스>의 간단한 사용

青灯夜游

풀어 주다： 2018-11-12 18:04:42

원래의

6336명이 탐색했습니다.

이 글의 내용은 html5의 Canvas 요소가 어떤 역할을 하는지 소개하는 것입니다. 를 사용하여 직사각형을 그리는 방법을 모두에게 알려주면 도움이 될 것입니다.

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

로그인 후 복사

아래와 같이 getElementById() 메서드를 사용하여 DOM에서

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

로그인 후 복사

Rendering context

캔버스 요소에는 getContext() 메서드라는 DOM 메서드가 있으며, 이는 렌더링 컨텍스트와 해당 그림을 가져오는 기능을 가지고 있습니다. 이 함수는 context2d 유형인 하나의 매개변수를 사용합니다.

다음은 필요한 컨텍스트를 가져오고 브라우저가

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

로그인 후 복사

캔버스의 예: 직사각형 그리기

<!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>

로그인 후 복사

렌더링:

html5에서 Canvas 요소의 역할은 무엇입니까? <캔버스>의 간단한 사용