HTML5 Canvas 기본 선 그리기 예제 tutorial_html5 튜토리얼 기술

선을 그리는 방법은 무엇입니까? 실제 그리는 것과 거의 같습니다.
1. 브러시를 그림의 시작 부분으로 이동합니다.
2. 첫 번째 획의 중지 지점을 결정합니다.
3. 계획한 후 브러시를 선택합니다. 두께, 색상 등)
도면 확인

캔버스는 상태 그리기를 기반으로 하기 때문에(매우 중요합니다. 나중에 설명하겠습니다) 처음 몇 단계는 상태를 결정하는 것이고 마지막 단계는 특정 그림을 그리는 것입니다.
1. 브러시 이동(moveTo())
이전에 브러시 컨텍스트를 얻었으므로 수정된 메서드인 context.moveTo(100,100)를 사용하는 예를 들어 보겠습니다. 이 코드의 의미는 브러시를 (100,100) 지점(단위는 px)으로 이동시키는 것입니다. 기억하세요, 캔버스의 왼쪽 상단은 데카르트 좌표계의 원점이며, y축의 양의 방향은 아래쪽, x축의 양의 방향은 오른쪽입니다.
2. 스트로크 중지 지점(lineTo())
마찬가지로 context.lineTo(600,600)입니다. 이 문장은 이전 스트로크의 중단점에서 (600,600)까지 그린다는 의미입니다. 하지만 여기서의 moveTo() 및 lineTo()는 단지 상태일 뿐이며, 계획 중이고, 그릴 준비를 하고 있으며, 아직 그리기를 시작하지 않았으며 단지 계획일 뿐입니다!
3. 브러시를 선택하세요
여기서는 브러시의 색상과 굵기만 설정합니다.
context.lineWidth = 5, 이 문장은 브러시(선)의 굵기를 10px로 설정하라는 의미입니다.
context.StrokeStyle = "#AA394C", 이 문장은 브러시(선)의 색상을 장미색으로 설정한다는 의미입니다.
캔버스는 상태 기반 그리기이므로 브러시 두께와 색상을 선택하면 실제로 선 두께와 색상도 선택됩니다.
4. 그리기 확인
그리기를 확인하는 방법은 fill()과 획() 두 가지뿐입니다. 그리기에 대한 기본 지식이 있는 사람은 전자가 채우기를 나타내고 후자는 획을 의미한다는 것을 알아야 합니다. 우리는 단지 선을 그리는 것이므로 선을 그어주세요. 그냥 context.Stroke() 코드를 호출하면 됩니다.

선을 그어보세요
그냥 선분 아닌가요! 말도 안되는 소리가 너무 많아요! 그럼 그림을 시작해 보겠습니다.

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

2. "zh">
"UTF-8"> 줄부터 시작
5. <본문>
"캔버스 워프"
7. > "canvas"
style=
8. "border: 1px solid #aaaaaa; 디스플레이: block; 여백: 50px auto ;"> 브라우저가 Canvas를 지원하지 않나요? ! 빨리 바꿔라! !

<스크립트>

window.onload =

함수

(){

var

canvas = document.getElementById(

"캔버스"); canvas.width = 800 캔버스.높이 = 600

var

context = canvas.getContext(

"2d"

) context.moveTo(100,100)

context.lineTo(600,600)

context.lineWidth = 5

context.StrokeStyle =

"#AA394C"

;

context.Stroke()

}

실행 결과:

(친구들이 맨날 페이지 오른쪽 하단에 있는 곰이 뭐냐고 물어보던데? 아, 아까 설명하는 걸 깜빡했는데 그게 제 위조방지 워터마크에요!)
페이지 분석 도표도 표시해 뒀어요 당신의 참고를 위해.

여기에서는 원래 태그에서 너비와 높이를 제거했지만 JavaScript 코드에서 캔버스 개체의 너비와 높이 속성을 설정했습니다.

요약: 캔버스 크기를 설정하는 방법은 두 가지밖에 없습니다

1. 태그에 설정합니다.

2. JS 코드에서 캔버스 속성을 설정합니다.

정말 멋지지 않나요? 다음으로 속도를 높여 여러 선으로 구성된 그래픽을 그려야 합니다. 아티스트에 한 발 더 가까워진 것 같나요? 이것은 단지 단순한 선분일 뿐이지만, 이 그림은 우리에게는 작은 발걸음이지만 인류에게는 거대한 도약입니다!

폴리라인 그리기
위에서 선분을 성공적으로 그렸습니다. 그렇다면 두 개의 스트로크 또는 심지어 많은 스트로크로 폴리라인을 그리려면 어떻게 해야 할까요? 똑똑한 친구들이라면 이런 생각을 했을 것입니다. lineTo()를 재사용하는 것은 간단하지 않습니다. 다음은 그냥 예쁜 폴리라인을 그렸어요~

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.moveTo(100,100)
context.lineTo(300,300)
context.lineTo(100,500)
context.lineWidth = 5
context.StrokeStyle =
18. "#AA394C"
;
19. context.Stroke()
20. }
실행 결과:
25. 여러 폴리라인 그리기
마찬가지로, 서로 다른 스타일로 여러 폴리라인을 그리고 싶다면 어떻게 해야 할까요? 예를 들어 여기에는 빨간색, 파란색, 검정색이라는 세 개의 폴리선을 그립니다. 똑똑한 친구들은 이것이 간단하지 않다고 생각했을 것입니다. 브러시 색상을 이동하고 변경하기만 하면 됩니다. 코드 형식은 동일하므로 복사하시면 됩니다. 코드는 다음과 같습니다.

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.        

  

  

<스크립트>   

    window.onload = 함수(){   

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

        canvas.width = 800;   

        canvas.height = 600;   

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

  

        context.moveTo(100,100);   

        context.lineTo(300,300);   

        context.lineTo(100,500);   

        context.lineWidth = 5;   

        context.StrokeStyle = "빨간색";   

        context.Stroke();   

  

        context.moveTo(300,100);   

        context.lineTo(500,300);   

        context.lineTo(300,500);   

        context.lineWidth = 5;   

        context.StrokeStyle = "파란색";   

        context.Stroke();   

  

        context.moveTo(500,100);   

        context.lineTo(700,300);   

        context.lineTo(500,500);   

        context.lineWidth = 5;   

        context.StrokeStyle = "검은색";   

        context.Stroke();   

    }   

  

  

  

실행 결과:

어? 이상하지 않나요? 먼저 빨간색, 그 다음 파란색, 그 다음 검정색은 어떻습니까? 왜 다 검은색이야? 사실, 그 이유는 제가 항상 강조해 왔던 것입니다. 캔버스는 상태 기반 그리기입니다.
무슨 뜻인가요? 실제로 이 코드는 스트로크()를 사용할 때마다 이전에 설정된 상태를 다시 그립니다. 첫 번째 스트로크() 동안 빨간색 폴리라인이 그려지고, 두 번째 스트로크() 동안 이전 빨간색 폴리라인이 다시 그려지지만 이때 브러시는 파란색으로 대체되었으므로 그려지는 폴리라인은 모두 파란색입니다. . 즉, 스트로크스타일 속성이 재정의됩니다. 마찬가지로 3번째 그리는 경우에는 펜 색상이 최종 검은색이 되므로 검은색 폴리선 3개가 다시 그려지게 됩니다. 따라서 여기에 보이는 3개의 폴리라인은 실제로는 3번 그려지므로 총 6개의 폴리라인이 그려집니다.
그럼 폴리선 3개를 그리고 싶은데 다른 방법은 없나요? 이것이 작가의 영혼의 끝인가? 희망이 없나요? 아니요, 방법이 있습니다.

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.        

  

  

<스크립트>   

    window.onload = 함수(){   

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

        canvas.width = 800;   

        canvas.height = 600;   

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

  

        context.beginPath();   

        context.moveTo(100,100);   

        context.lineTo(300,300);   

        context.lineTo(100,500);   

        context.lineWidth = 5;   

        context.StrokeStyle = "빨간색";   

        context.Stroke();   

  

        context.beginPath();   

        context.moveTo(300,100);   

        context.lineTo(500,300);   

        context.lineTo(300,500);   

        context.lineWidth = 5;   

        context.StrokeStyle = "파란색";   

        context.Stroke();   

  

        context.beginPath();   

        context.moveTo(500,100);   

        context.lineTo(700,300);   

        context.lineTo(500,500);   

        context.lineWidth = 5;   

        context.StrokeStyle = "검은색";   

        context.Stroke();   

    }   

  

  

  

저희는 이것을 사용하여 시작 경로()를 사용하고 있습니다. 다음으로, 而且每次只绘제일条折线。beginPath()是绘设置状态的起始点, 它之后代码设置的绘绘态态적작용域结束于绘状态的起始点, 后亚讲到。
所以我们每次开始绘前每次绘绘结束后使usebeginPath()。