>웹 프론트엔드 >H5 튜토리얼 >HTML5 캔버스 기본 그리기: 다섯개 별 그리기

HTML5 캔버스 기본 그리기: 다섯개 별 그리기

黄舟
黄舟원래의
2018-05-24 15:25:439607검색

5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b는 그래픽을 그리는 데 사용되는 HTML5의 새로운 태그입니다. 실제로 이 태그는 다른 태그와 동일합니다. CanvasRenderingContext2D 객체를 얻으면 JavaScript 스크립트를 통해 그리기 위한 객체를 제어할 수 있습니다.
5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b는 ID, 클래스, 스타일 등과 같은 속성 외에도 높이 및 너비 속성도 있습니다. 5ba626b379994d53f7acf72a64f9b697> 요소에 그리는 세 가지 주요 단계는 다음과 같습니다.
1. Canvas 개체인 5ba626b379994d53f7acf72a64f9b697 요소에 해당하는 DOM 개체를 가져옵니다.
2. ) Canvas 객체의 메서드인 CanvasRenderingContext2D 객체를 가져옵니다.
3. 그리기를 위해 CanvasRenderingContext2D 객체를 호출합니다.

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

HTML5 캔버스 기본 그리기: 다섯개 별 그리기

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

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();

최종 효과:

HTML5 캔버스 기본 그리기: 다섯개 별 그리기

위 내용은 HTML5 Canvas 기본 그리기 - 오각별 그리기 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

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