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

집

웹 프론트엔드

HTML 튜토리얼

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

yulia

Oct 19, 2018 pm 05:44 PM

canvashtml5

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

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

더 많은 관련 튜토리얼을 보려면

Html5 비디오 튜토리얼

을 방문하세요.

위 내용은 HTML5에서 캔버스로 그라데이션 사각형을 그리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

HTML 태그가 웹 개발에 중요한 이유는 무엇입니까?May 02, 2025 am 12:03 AM

htmltagsareessentialforwebdevelopmentasthuctureandenhancewebpages.1) thefinelayout, semantics 및 internactivity.2) semantictagsimproveAccessibility 및 sseo.3) appleasoftagscanoptimizeperformanceandenseRocRossercompatiber.

HTML 태그 및 속성에 일관된 코딩 스타일을 사용하는 것의 중요성을 설명하십시오.May 01, 2025 am 12:01 AM

일관된 HTML 인코딩 스타일은 코드의 가독성, 유지 가능성 및 효율성을 향상시키기 때문에 중요합니다. 1) 소문자 태그 및 속성 사용, 2) 일관된 압입 유지, 3) 단일 또는 이중 인용문을 선택하고 고수하십시오. 4) 프로젝트에서 다양한 스타일을 혼합하지 않으십시오.

Bootstrap 4에서 멀티 프로 젝트 회전 목마를 구현하는 방법은 무엇입니까?Apr 30, 2025 pm 03:24 PM

솔루션 Bootstrap4에서 다중 프로 젝트 회전 목마를 구현하는 것은 부트 스트랩 4에서 멀티 프로 젝트 회전 목마를 구현하는 것은 쉬운 일이 아닙니다. 부트 스트랩 ...

DeepSeek 공식 웹 사이트는 마우스 스크롤 이벤트를 관통하는 효과를 어떻게 달성합니까?Apr 30, 2025 pm 03:21 PM

마우스 스크롤링 이벤트 침투의 효과를 달성하는 방법은 무엇입니까? 웹을 탐색하면 종종 특별한 상호 작용 디자인이 발생합니다. 예를 들어, DeepSeek 공식 웹 사이트에서 � ...

HTML 비디오의 재생 제어 스타일 수정 방법Apr 30, 2025 pm 03:18 PM

HTML 비디오의 기본 재생 제어 스타일은 CSS를 통해 직접 수정할 수 없습니다. 1. JavaScript를 사용하여 사용자 정의 컨트롤을 만듭니다. 2. CSS를 통해 이러한 통제를 아름답게합니다. 3. video.js 또는 plyr와 같은 라이브러리를 사용하여 호환성, 사용자 경험 및 성능을 고려하면 프로세스를 단순화 할 수 있습니다.