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

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

WBOY

풀어 주다： 2016-05-16 15:49:34

원래의

1810명이 탐색했습니다.

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

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

onTouchStart 터치 시작

onTouchMove 터치 슬라이드

onTouchEnd 터치 종료

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

IPAD에 미치는 영향:

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

아이디어: 손가락이 화면을 터치할 때 손가락이 미끄러지기 시작하면 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();
}