프로젝트 8: HTML 5 캔버스

"30일 동안 30개의 Js 프로젝트 빌드"시리즈에 오신 것을 환영합니다. 오늘은 8일차와 프로젝트 8입니다. 이 시리즈의 다른 기사를 읽지 않은 경우 먼저 확인하십시오. 나는 이 기사의 끝에 그것들을 나열할 것이다.

내 이전 기사에서 언급했듯이. Wes Bos Javascript30 course 8일차 챌린지 입니다.

최종 결과:

캔버스를 지우려면 다시 실행을 누르십시오.

추가된 기능: 이 프로젝트를 마우스 작동 및 터치 스크린 장치와 호환되도록 만들었습니다.

My source code

시작하기 전에 항상 그렇듯이 here 에서 시작 파일을 다운로드하십시오. 스타터 파일을 다운로드하는 방법에 대한 별도의 기사를 작성했는데 확인하실 수 있습니다.

파트 1:HTML

여기에서는 단순히 캔버스 요소를 사용하여 캔버스를 만들었습니다. 중요한 부분은 컨테이너에 추가된 스타일입니다.
이 부분은 이해를 돕기 위해 자바스크립트 부분에서 설명하겠습니다.

파트 3: 자바스크립트

이제 프로젝트를 대화형으로 만들 것입니다.
처음에는 dom에서 draw id를 가져 와서 창의 높이와 너비와 동일한 높이와 너비를 각각 지정했습니다.

let canvas=document.getElementById('draw');
//setup size of camvas to cover the whole screen
canvas.height=window.innerHeight;
canvas.width=window.innerWidth;

이제 getContext을 사용하여 캔버스에서 반환되는 콘텐츠 유형을 가져옵니다. 2d 도면을 만들고 싶으므로 2d로 설정하겠습니다.
이제 간단히 속성을 설정했습니다.
1.setStroke- 그릴 획의 색상을 설정하는 데 사용됩니다.
2.lineCap- 획이 처음에 시작할 모양을 설정합니다.
3.lineJoin - 두 선이 만나는 지점의 모양을 설정합니다.

ctx.strokeStyle=`black`;
ctx.lineJoin='circle';
ctx.lineCap='circle';

이제 획을 그려야 하는지 여부를 결정하는 플래그를 만들 것입니다. 사용자가 화면 터치/클릭을 중지하거나 사용자가 캔버스에서 멀리 떨어진 곳을 터치할 때 불필요한 스트로크를 표시하고 싶지 않습니다.

let flag=false;

사용자가 화면을 터치하거나 캔버스 요소를 클릭하는 경우에만 true로 설정되므로 처음에는 false로 설정됩니다.

이제 캔버스에 이벤트 리스너를 추가합니다.
터치 장치/마우스 작동 장치 모두와 호환되도록 코스 비디오에 표시된 것처럼 포인터 이벤트를 사용하고 마우스 이벤트를 사용하지 않았습니다. Read more about this event

1. 사용자가 하게 될 첫 번째 작업은 단순히 화면을 클릭/터치하는 것입니다.

canvas.addEventListener('pointdown',(e)=>{flag=true; 
    [startX,startY]=[e.offsetX,e.offsetY];

    })

startX 및 startY는 사용자가 클릭한 점의 좌표이므로 사용자가 그리기 시작하려는 점입니다. 오프셋은 pointdown이 호출된 좌표를 제공합니다.

2. 사용자가 캔버스 주위를 이동할 것입니다. 여기서 획을 표시해야 하므로 그리기 기능을 호출합니다.

canvas.addEventListener('pointmove',draw);

3. 사용자가 캔버스 터치/클릭을 중지하거나 사용자가 캔버스에서 멀리 클릭/터치합니다. 이 두 경우 모두 그리기 기능이 호출되는 것을 원하지 않으므로 플래그를 false로 설정합니다(획을 그려서는 안 됨).

//if user stops pressing mouse
canvas.addEventListener('pointup',()=>flag=false);
//if user clicks anywhere other than canvas
canvas.addEventListener('pointout',()=>flag=false);

이제 우리는 그리기 기능을 만들 것입니다-

function draw(e){
    if(flag==false) return;//user is not drawing
    //  setting varying color 
    ctx.strokeStyle=`hsl(${hue},100%,50%)`;
    //start path of stroke
    ctx.beginPath();
    //move to the starting point where user clicked
    ctx.moveTo(startX,startY);
    //draw line till this point 
    ctx.lineTo(e.offsetX,e.offsetY);
    //offset property returns the coordinate at which mouse if clicked. so it will join the line to the point where user keeps moving the mouse.
    ctx.stroke();
    //actually drawing the line between the points

    //setting start points to the last point at which user stopped drawing,without this if draw is triggered then starting point will stick to mousedown offsets only and we want it to start from the point where mouse is being moved currently.
    [startX,startY]=[e.offsetX,e.offsetY];
 //we want color to start from the hue=0 value when it reaches 360.
    hue=(hue>360?0:hue+1);
}

이제 html 부분에서 이야기한 인라인 CSS 부분을 살펴보겠습니다. 포인터가 좌표를 변경하고 포인터가 브라우저 터치 동작에 의해 취소되지 않은 경우 pointermove 이벤트가 시작됩니다. 터치 액션이 없으면 브라우저가 포인터 이동을 취소하지 않으므로 스트로크를 계속할 수 없습니다. 없음으로 설정하면 이 문제가 방지됩니다. For more info

내가 배운 것들:

말 그대로 모든 것이 쓰여졌습니다. 🥴

이 시리즈의 이전 기사:

결론

오늘의 프로젝트는 여기까지입니다. 다음 프로젝트는 14개의 Dev Tool 트릭에 대해 논의할 프로젝트 9가 될 것입니다.

의심 사항이나 제안 사항이 있으면 의견 섹션에 알려주십시오. 기꺼이 당신과 소통하겠습니다.

이 시리즈가 마음에 들고 그 일부가 되고 싶다면

읽어 주셔서 감사합니다. :)