HTML5 Canvas API_html5 튜토리얼 팁을 사용하여 직사각형을 그리는 최고의 전략

closePath()를 사용하여 모양을 닫습니다.
먼저 가장 일반적인 방법을 사용하여 직사각형을 그립니다.

JavaScript 코드클립보드에 콘텐츠 복사

1.   
2. "ko">   
3. <머리>   
4.     "UTF-8">   
5.     <제목>   
6.   
7. <본문>   
8.   
9. "zh">   
10. <머리>   
11.     "UTF-8">   
12.     <제목>绘제조형   
13.   
14. <본문>   
15. "캔버스 워프">   
16.     "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto ;">   
17.         이런 것은 캔버스?！赶快换一个吧！！   
18.        

  

  

<스크립트>   

    window.onload = 함수(){   

        var canvas = document.getElementById("canvas");   

        canvas.width = 800;   

        canvas.height = 600;   

        var context = canvas.getContext("2d");   

  

        context.beginPath();   

        context.moveTo(150,50);   

        context.lineTo(650,50);   

        context.lineTo(650,550);   

        context.lineTo(150,550);   

        context.lineTo(150,50);     //绘system最后一笔使图이미지闭합   

        context.lineWidth = 5;   

        context.StrokeStyle = "검은색";   

        context.Stroke();   

  

    }   

  

  

  

  

  

실행 결과:

얼핏 보면 아무 문제가 없지만, 시력이 좋은 어린이 신발은 마지막 스트로크를 닫을 때 문제가 발생하여 왼쪽 상단 모서리에 틈이 생기는 것을 발견했습니다. 이 상황은 lineWidth 설정으로 인해 발생합니다. 기본값이 1스트로크이면 문제가 없습니다. 그러나 획이 클수록, 선이 넓어질수록 이 간격은 더욱 분명해집니다. 그렇다면 이런 상황을 피하려면 어떻게 해야 할까요?
제목이 이미 손상되었습니다. 천 경로()를 사용하여 모양을 닫습니다.

JavaScript 코드클립보드에 콘텐츠 복사

2. "zh">
"UTF-8">
<본문>
"캔버스 워프">
"canvas" style=
"border: 1px solid #aaaaaa; 디스플레이: block; 여백: 50px auto ;"
> 브라우저가 Canvas를 지원하지 않나요? ! 빨리 바꿔라! !
7. <스크립트>
8. window.onload =
함수
9. (){
10. var canvas = document.getElementById(
"캔버스"
11. ); canvas.width = 800 캔버스.높이 = 600
12. var
context = canvas.getContext(
13. "2d"
)
14. context.beginPath()
context.moveTo(150,50)
context.lineTo(650,50)
context.lineTo(650,550)
context.lineTo(150,550)
context.lineTo(150,50);
19. //마지막 획을 그릴 필요는 없습니다
context.closePath();
21. //closePath()를 사용하여 그래픽 닫기
22. context.lineWidth = 5
context.StrokeStyle =
23. "검정색"
context.Stroke()
}

32. 실행 결과:
    

    이 예에서는 이전 강의의 설명과 결합하여 경로를 그릴 때 계획된 경로를 BeginPath() 및 closePath()로 래핑해야 한다는 것을 알고 있습니다. 물론 마지막 획을 그릴 필요는 없으며 closePath()를 직접 사용하면 자동으로 닫힙니다. (따라서 닫힌 모양을 그리고 싶지 않다면 closePath()를 사용할 수 없습니다)
    

    사각형 색칠하기
    여기서는 스트로크()와 마찬가지로 중요한 fill() 메서드를 소개합니다. 원래 획과 마찬가지로 채우기 전에 먼저 fillStyle 속성을 사용하여 채울 색상을 선택해야 합니다.
    예를 들어 노란색 위의 직사각형을 색칠하고 싶다면 이렇게 쓰면 됩니다.
    

    JavaScript 코드클립보드에 콘텐츠 복사

    1.   
    2. "zh">   
    3.   
    4.     "UTF-8">   
    5.        
    6.   
    7.   
    8. "canvas-warp">   
    9.     "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
    10.         你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    11.        

      
33.   
34. <스크립트>   
35.     window.onload = 함수(){   
36.         var canvas = document.getElementById("canvas");   
37.         canvas.width = 800;   
38.         canvas.height = 600;   
39.         var context = canvas.getContext("2d");   
40.   
41.         context.beginPath();   
42.         context.moveTo(150,50);   
43.         context.lineTo(650,50);   
44.         context.lineTo(650,550);   
45.         context.lineTo(150,550);   
46.         context.lineTo(150,50);     //最后一笔可以不画   
47.         context.closePath();        //使용closePath()闭합형형   
48.   
49.         context.fillStyle = "노란색";   //选择油漆桶的颜color   
50.         context.lineWidth = 5;   
51.         context.StrokeStyle = "검은색";   
52.   
53.         context.fill();                 //确정당充   
54.         context.Stroke();   
55.   
56.     }   
57.   
58.   
59.   
60.   
61.   
62.   

실행 결과:

여기서 주목해야 할 것은 올바른 코딩 습관입니다. 앞서 언급한 바와 같이 Canvas는 상태 기반 그리기이고, 스트로크()와 fill()이 호출될 때만 그리기가 결정되기 때문입니다. 따라서 우리는 무승부를 결정하는 코드와 상태 설정을 분리하기 위해 이 두 줄의 코드를 끝에 배치하고 나머지 상태 설정 코드를 그 앞에 배치할 것입니다. 코드 가독성을 향상시킵니다.

캡슐화된 그리기 방법
사각형을 그리는 데 실제로 이와 같은 네 가지 스트로크가 필요하다는 것을 발견하셨을 것입니다. 이 어리석은 방법을 사용하여 사각형을 그릴 때마다 다음을 그려야 합니다. 4개의 스트로크를 사용하면 얼마나 많은 문제가 발생합니까? 100? 1,000? 이렇게 작성하면 코드가 너무 커지고 재사용성이 매우 낮아집니다. 여기서는 JavaScript를 사용하여 이러한 메서드를 캡슐화할 수 있습니다. 우리는 직사각형이 왼쪽 상단 모서리의 좌표와 길이 및 너비에 의해 고유하게 결정될 수 있다는 것을 알고 있습니다.
자바스크립트 함수
자바스크립트 함수를 소개합니다. 기본 지식이 있는 경우 이 섹션을 건너뛰고 다음 섹션으로 바로 이동할 수 있습니다.
JavaScript 및 ActionScript 언어 함수 선언 호출은 프로그래밍 언어 중에서 가장 간단합니다.
함수의 역할
함수의 역할은 한 번 코드를 작성하고 이 코드를 반복해서 재사용하는 것입니다. 예를 들어, 여러 합계 집합의 기능을 완성하려고 합니다.

JavaScript 코드클립보드에 콘텐츠 복사

1. var 합계
2. 합 = 3
3. 경고(합)
5. 합계=7 8
6. 경고(합)
8. .... //두 줄의 코드 반복  

8개 숫자 그룹의 합을 구현하려면 16줄의 코드가 필요합니다. 더 많이 구현할수록 더 많은 코드 줄이 필요합니다. 따라서 특정 기능을 수행하는 코드 블록을 함수에 넣어서 이 함수를 직접 호출할 수 있어, 많은 양의 코드를 반복적으로 입력하는 수고를 덜 수 있습니다.
기능을 사용하여 완료:

JavaScript 코드클립보드에 콘텐츠 복사

1. 함수 add2(a,b){
2. 합계 = a b
3. 알림(합)
4. } // 한 번만 작성하시면 됩니다.
6. add2(3,2)
7. add2(7,8)
8. .... //함수 호출하기  

함수 정의
함수를 어떻게 정의하나요? 아래 형식을 살펴보세요.

JavaScript 코드클립보드에 콘텐츠 복사

1. 함수 함수명( )
2. {
3. 함수 본체
4. }

function은 함수를 정의하는 키워드이고, "함수 이름"은 함수에 부여하는 이름이고, "함수 본문"은 특정 함수를 완성하는 코드로 대체됩니다.
함수 호출
함수를 정의한 후에는 자동으로 실행할 수 없으며, 함수를 호출하고 필요한 위치에 직접 함수 이름을 적어주어야 합니다. 일반적으로 두 가지 방법이 있습니다:

사례 1: <script> 태그 내에서 호출됩니다. </p> <div class="codeText"> <div class="codeHead"> <span class="lantxt">JavaScript 코드</span><span style="CURSOR: pointer" class="copyCodeText" onclick="copyIdText('code_6911')">클립보드에 콘텐츠 복사</span> </div> <div id="code_6911"> <ol class="dp-c"> <li class="alt"><span><span><스크립트> </span></span></li> <li> <span></span><span class="keyword">함수</span><span> tcon() </span> </li> <li class="alt"><span>{ </span></li> <li> <span> Alert(</span><span class="string">"함수 호출 학습을 축하합니다!"</span><span>); </span> </li>} <li class="alt"><span> </span></li>tcon(); <li> <span>//함수를 호출하고 함수 이름을 직접 작성합니다. </span><span class="comment"> </span><span> </span> </li></script>