HTML5에서 캔버스로 그라데이션 사각형을 그리는 방법
- yulia원래의
- 2018-10-19 17:44:453134검색
캔버스는 브라우저에 다양한 멋진 효과를 그릴 수 있는 새로운 기능입니다. 프론트 엔드 개발자로서 캔버스를 사용하여 그래픽을 그리는 방법을 알고 계십니까? 이 글에서는 캔버스를 사용하여 직사각형과 그라데이션 직사각형을 그리는 방법에 대해 설명합니다. 관심 있는 친구들은 이를 참고할 수 있습니다.
예제 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:
예 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에서 캔버스로 그라데이션 사각형을 그리는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!