H5에서 다섯개 별을 그리는 방법

이번에는 H5를 사용하여 오각별을 그리는 방법을 보여 드리겠습니다. H5에서 오각별을 그릴 때 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b는 그래픽을 그리는 데 사용되는 새로운 태그입니다. 실제로 이 태그의 특별한 특징은 이 태그가 CanvasRenderingContext2D 개체를 얻을 수 있다는 것입니다. 그리기를 위해 이 개체를 제어하려면 JavaScriptscript를 사용하세요.

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b는 ID, 클래스, 스타일 등과 같은 속성 외에도 높이 및 너비 속성도 있습니다. 5ba626b379994d53f7acf72a64f9b697> 요소에 그리는 세 가지 주요 단계는 다음과 같습니다.

1. Canvas 개체인 DOM 개체를 가져옵니다. 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 자료:

정규 표현식을 사용하는 방법IP 주소와 도메인 이름을 일치시키는 방법

하이라이트를 표시할 수 있는 정규 표현식의 종류

WeChat 애플릿에 아바타를 업로드하는 방법

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