HTML5를 사용하여 드로잉 보드를 만드는 방법 소개 board_html5 튜토리얼 기술

먼저 주의할 점은 마우스로 그림을 그리는 것이 아니라, 아이패드 등 터치 기기에서 손가락으로 그림을 그린다는 점입니다.

화판을 만들려면 자연스럽게 HTML5 캔버스를 사용하여 구현해 보세요. 캔버스에서는 원, 직사각형, 맞춤 선 등을 그릴 수 있습니다. 이번에는 주로 원과 선 그리기를 사용하여 이를 구현합니다. 터치 이벤트에 대한 응답은 html에서 지원됩니다.

onTouchStart 터치 시작

onTouchMove 터치 슬라이드

onTouchEnd 터치 종료

이러한 이벤트를 사용하면 브라우저에서 손가락으로 그리는 것이 매우 간단합니다.

IPAD에 미치는 영향:

아이디어: 손가락이 화면을 터치할 때 손가락이 미끄러지기 시작하면 onTouchStart 이벤트에서 손가락이 터치한 위치에 원을 추가하고 이전 터치 지점에서 다음 터치 지점으로 계속 이동합니다. onTouchMove에서 점선.

HTML:

코드 복사

코드는 다음과 같습니다.

gt ;

JS:

코드 복사

코드는 다음과 같습니다.

//get canvas
var canvas = document.getElementById("canvas");
//full screen
canvas.width= window.innerWidth ;
canvas.height=window.innerHeight;
//터치 지원 여부
var touchable = 'createTouch' in document;
if(터치 가능) {
canvas.addEventListener ('touchstart' , onTouchStart, false);
canvas.addEventListener('touchmove', onTouchMove, false);
}
else
{
Alert("touchable은 false입니다!") ;
}
//마지막 터치 좌표
var lastX;
var lastY;

var ctx =canvas.getContext("2d");
ctx.lineWidth=10;//브러시 두께
ctx.StrokeStyle="#FF0000";//브러시 색상

//터치 시작 이벤트
function onTouchStart(event) {
event.preventDefault();
lastX=event.touches[0].clientX;
lastY=event.touches[ 0].clientY;
drawRound(lastX,lastY);

}
//터치 슬라이딩 이벤트
function onTouchMove(event) {
try
{
event.preventDefault();
drawLine(lastX,lastY,event. touches[0].clientX,event.touches[0].clientY);
lastX=event.touches[0].clientX;
lastY=event.touches[0].clientY;
}
catch(err){
경고( err.description);
}

}

//원 그리기
function drawRound(x,y)
{
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc ( x,y,5,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
//선 그리기
함수 drawLine(startX,startY,endX,endY)
{
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(startX,startY);
ctx .lineTo(endX,endY);
ctx.Stroke();
}

핵심사항:

ctx.lineCap="round"; 그린 선 끝의 스타일 캡을 둥글게 설정합니다. 이것은 매우 중요합니다. 그렇지 않으면 선의 각도가 크게 변하는 곳에서 끊어짐이 발생합니다.

event.preventDefault(); 이벤트의 기본 동작을 취소합니다. 이 메서드는 슬라이딩 이벤트에서 호출되어야 합니다. 그렇지 않으면 슬라이딩할 때 브라우저의 기본 슬라이딩 이벤트가 트리거되고 페이지가 아래로 당겨져 그릴 수 없게 됩니다.