HTML5 캔버스에 다섯개 별을 그리는 방법

不言
풀어 주다: 2018-07-03 10:18:46
원래의
3513명이 탐색했습니다.

이 글은 HTML5 캔버스에 오각별을 그리는 방법을 주로 소개합니다. 참고할만한 가치가 있어서 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다

는 HTML5 태그에 새로 추가된 것으로, 그래픽을 그리는 데 사용됩니다. 이번 글에서는 HTML5 캔버스의 기본 그리기와 다섯개 별을 그리는 방법을 주로 소개합니다. 관심 있는 친구들은 참고하세요

<캔버스>< ;/canvas>예 HTML5의 새로운 태그는 그래픽을 그리는 데 사용됩니다. 실제로 이 태그의 특별한 특징은 이 태그가 JavaScript 스크립트를 통해 제어할 수 있는 CanvasRenderingContext2D 개체를 얻을 수 있다는 것입니다. 그림.

는 단지 그래픽을 그리기 위한 컨테이너일 뿐입니다. ID, 클래스, 스타일 등과 같은 속성 외에도 높이 및 너비 속성도 있습니다. > 요소에 그리는 세 가지 주요 단계는 다음과 같습니다.

1. Canvas 개체인 요소에 해당하는 DOM 개체를 가져옵니다.
2. CanvasRenderingContext2D 개체를 가져오기 위한 Canvas 개체
3 그리기 위해 CanvasRenderingContext2D 개체를 호출합니다.

오각별을 분석하면 각 꼭지점의 좌표 규칙을 알 수 있습니다. 여기서 주목해야 할 점은 캔버스에서 Y축 방향이 아래쪽을 향하고 있다는 것입니다.

해당 코드는 다음과 같습니다.

var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
    context.beginPath();   
    //设置是个顶点的坐标,根据顶点制定路径 
    for (var i = 0; i < 5; i++) {   
        context.lineTo(Math.cos((18+i*72)/180*Math.PI)*200+200,   
                        -Math.sin((18+i*72)/180*Math.PI)*200+200);   
        context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,   
                        -Math.sin((54+i*72)/180*Math.PI)*80+200);   
    }   
    context.closePath();   
    //设置边框样式以及填充颜色 
    context.lineWidth="3";   
    context.fillStyle = "#F6F152";   
    context.strokeStyle = "#F5270B";   
    context.fill();   
    context.stroke();
로그인 후 복사

최종 효과:

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 내용이 있으니 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

html5는 캔버스를 사용하여 커서를 따라가는 불꽃 효과를 얻습니다.

캔버스를 사용하여 "도라에몽" 시계를 그리는 코드

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿