HTML5에서 캔버스로 그라데이션 사각형을 그리는 방법-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML5에서 캔버스로 그라데이션 사각형을 그리는 방법

yulia

Oct 19, 2018 pm 05:44 PM

canvas html5

캔버스는 브라우저에 다양한 멋진 효과를 그릴 수 있는 새로운 기능입니다. 프론트 엔드 개발자로서 캔버스를 사용하여 그래픽을 그리는 방법을 알고 계십니까? 이 글에서는 캔버스를 사용하여 직사각형과 그라데이션 직사각형을 그리는 방법에 대해 설명합니다. 관심 있는 친구들은 이를 참고할 수 있습니다.

예제 1: 캔버스를 사용하여 빨간색 직사각형을 그립니다. 구체적인 단계는 다음과 같습니다.

1단계: document.getElementById()를 사용하여

2단계: getContext("2d" 사용) ) 컨텍스트 객체를 생성합니다.

3단계: fillStyle 속성은 직사각형의 색상을 설정할 수 있습니다. 이 예에서는 fillRect(x,y,width,height) 메소드가 채워진 직사각형을 그릴 수 있습니다. x는 직사각형의 왼쪽 상단 모서리의 X축 좌표를 나타내고, y는 직사각형의 왼쪽 상단 모서리의 Y축 좌표를 나타내며, width는 직사각형의 너비를 나타내고, height는 직사각형의 높이를 나타냅니다. 전체 코드는 다음과 같습니다:

<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
</body>
<script type="text/javascript">  
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");
  ctx.fillStyle="#FF0000";
  ctx.fillRect(25,10,150,80);
</script>

로그인 후 복사

Rendering:

HTML5에서 캔버스로 그라데이션 사각형을 그리는 방법 예 2: 캔버스를 사용하여 그라데이션 직사각형을 그립니다. 코드는 다음과 같습니다. 표시:

<body>
  <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>
</body>
<script type="text/javascript">  
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");  
  // Create gradient
  var grd=ctx.createLinearGradient(0,0,200,0);
  grd.addColorStop(0,"orange");
  grd.addColorStop(1,"red");  
  // Fill with gradient
  ctx.fillStyle=grd;
  ctx.fillRect(25,10,150,80);
</script>

로그인 후 복사

createLinearGradient(x,y,x1,y1)는 선형 그래디언트를 사용하는 경우 두 개 이상의 색상을 사용해야 합니다.

addColorStop() 메서드는 색상 중지를 나타내며 0에서 1까지 가능합니다.

fillStyle을 사용하여 사각형 색상을 설정한 다음 fillRect(x,y,width)를 사용합니다. , height)를 사용하여 직사각형을 그립니다

효과는 그림과 같습니다:

HTML5에서 캔버스로 그라데이션 사각형을 그리는 방법 위에서는 캔버스로 직사각형과 그라데이션 직사각형을 그리는 방법을 자세히 설명하고 비교합니다. 초보자도 직접 해보고 볼 수 있습니다. 더 멋진 그래픽을 그릴 수 있다면 이 글이 도움이 되길 바랍니다!