캔버스로 직사각형을 그리는 방법은 무엇입니까? 캔버스에 직사각형을 그리는 두 가지 방법 소개-H5 튜토리얼-php.cn

캔버스로 직사각형을 그리는 방법은 무엇입니까? 캔버스에 직사각형을 그리는 두 가지 방법 소개

不言

풀어 주다： 2018-09-17 13:43:45

원래의

17358명이 탐색했습니다.

캔버스 요소는 JavaScript를 사용하여 웹 페이지에 이미지를 그립니다. 캔버스는 모든 픽셀을 제어할 수 있는 직사각형 영역입니다. 캔버스에는 경로, 직사각형, 원, 문자를 그리고 이미지를 추가하는 다양한 방법이 있습니다. 그렇다면 캔버스를 사용하여 직사각형을 그리는 방법은 무엇입니까? 다음 글에서는 캔버스에 직사각형을 그리는 구현 방법을 소개하겠습니다. 필요하시면 살펴보시면 됩니다.

우리가 알아야 할 것은 캔버스의 직사각형과 관련된 메소드가 ret()라는 것입니다. 실제로 캔버스에 직사각형을 그리려면 스트로크() 또는 fill() 메소드를 사용하십시오.

Rect() 메서드는 직사각형의 x 좌표, 직사각형의 y 좌표, 직사각형의 너비, 직사각형의 높이 등 4개의 매개변수를 받을 수 있습니다. 이러한 매개변수의 단위는 픽셀입니다.

이제 사각형을 그리기 위해 스트로크렉트()와 필렉트() 메소드를 사용하겠습니다.

먼저 캔버스에서 filllect() 메서드를 사용하여 채워진 사각형을 그린 예를 살펴보겠습니다.

fillRect() 메서드로 캔버스에 그린 사각형이 지정된 색상으로 채워집니다. 채우기 색상은 fillStyle 속성을 통해 지정됩니다.

    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="utf-8" />  
    <title>用canvas画矩形</title>  
    <style>  
    </style>  
    </head>  
    <body>  
    <canvas id="canvas" width="600" height="400"></canvas>  
    <script type="text/javascript">  
      function draw(id){  
          var canvas = document.getElementById(id);  
          var context = canvas.getContext(&#39;2d&#39;);  //getContext() 方法可返回一个对象  
          context.fillStyle = "green";  // 设置或返回用于填充绘画的颜色、渐变或模式              
          context.fillRect(50,50,400,300);  // x轴 y轴 宽 和 高 ,绘制“被填充”的矩形      
     }  
     draw("canvas");  
    </script>  
    </body>  
    </html>

로그인 후 복사

캔버스에 채워진 직사각형을 그리는 효과는 다음과 같습니다.

그럼 캔버스에서 스트로크렉트() 메서드를 사용하여 칠하지 않은 직사각형을 그리는 예를 살펴보겠습니다.

strokRect() 메서드로 캔버스에 그린 사각형은 지정된 색상으로 스트로크됩니다. 획 색상은 스트로크스타일 속성을 통해 지정됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用canvas画矩形</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
<script type="text/javascript">
  function draw(id){
      var canvas = document.getElementById(id);
      var context = canvas.getContext(&#39;2d&#39;);  //getContext() 方法可返回一个对象
      context.strokeStyle = "pink";  //图形边框的填充颜色
      context.lineWidth = 5;  //用宽度为 5 像素的线条来绘制矩形：     
      context.strokeRect(50,50,180,120);  //绘制矩形（无填充）
      context.strokeRect(110,110,180,120);      
 }
 draw("canvas");
</script>
</body>
</html>

로그인 후 복사

캔버스에 채워지지 않은 직사각형을 그리는 효과는 다음과 같습니다.

캔버스로 직사각형을 그리는 방법은 무엇입니까? 캔버스에 직사각형을 그리는 두 가지 방법 소개