의견 : 드로잉 보드를 만들 때 당연히 HTML5의 캔버스를 사용하여이를 달성합니다. 캔버스에서는 원, 사각형, 커스텀 라인 등을 그릴 수 있습니다. 이번에는 주로 원과 선을 사용하여 달성합니다. HTML의 터치 이벤트에 대한 응답을 지원합니다
가장 먼저 주목해야 할 것은 마우스와 함께 그리는 것이 아니라 iPad와 같은 터치 장치에서 손가락을 사용한다는 것입니다.
드로잉 보드를 만들기 위해 자연스럽게 HTML5의 캔버스를 사용하여 달성합니다. 캔버스에서는 원, 사각형, 커스텀 라인 등을 그릴 수 있습니다. 이번에는 주로 원과 선을 사용하여 달성합니다. 터치 이벤트에 대한 응답은 HTML에서 지원됩니다.
OntouchStart 터치 시작
Ontouchmove 터치 스 와이프
Ontouchend 터치 엔드
이러한 이벤트를 통해 손가락으로 브라우저를 그리는 것은 매우 쉽습니다.
iPad에 미치는 영향 :
아이디어 : 손가락이 화면에 닿으면 OntouchStart 이벤트에서 손가락의 터치 위치에 원을 추가하십시오. 손가락이 미끄러지기 시작하면 이전 터치 포인트에서 Ontouchmove의 다음 점으로 줄을 지속적으로 그립니다.
HTML :
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w.w.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">/p><P> html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<title> 캔버스 </title>
<meta name = "viewport"content = "width = device-width, user-scalable = no">
</head>
<body>
<canvas>/canvas>
<script type = "text/javaScript"src = "canvasscript.js"charset = "utf-8"> </script>
</body>
</html>
JS :
// 캔버스를 얻습니다
var canvas = document.getElementById ( "캔버스");
// 전체 화면
canvas.width = window.innerWidth;
canvas.height = window.innerheight;
// 터치를 지원하는지 여부
var touchable = 'createTouch'문서;
if (touchable) {
canvas.addeventListener ( 'touchstart', ontouchstart, false);
canvas.addeventListener ( 'touchmove', ontouchmove, false);
}
또 다른
{
Alert ( "터치 가능 거짓!");
}
// 마지막 터치 좌표
var lastx;
var lasty; </p> <p> var ctx = canvas.getContext ( "2d");
ctx.linewidth = 10; // 브러시의 두께
ctx.strokestyle = "#ff0000"; // 브러시 색상 </p> <p> // 터치 시작 이벤트
함수 OnTouchStart (이벤트) {
event.preventDefault ();
lastx = event.touches [0] .clientx;
lasty = event.touches [0] .Clienty;
DrawRound (Lastx, Lasty); </p> <p>}
// 슬라이딩 이벤트를 터치합니다
함수 ontouchmove (이벤트) {
노력하다
{
event.preventDefault ();
drawline (lastx, lasty, event.touches [0] .clientx, event.touches [0] .clienty);
lastx = event.touches [0] .clientx;
lasty = event.touches [0] .Clienty;
}
캐치 (err) {
경고 (err.description);
} </p> <p>} </p> <p> // 원을 그립니다
함수 드로 드라운드 (x, y)
{
ctx.fillstyle = "#ff0000";
ctx.beginpath ();
ctx.arc (x, y, 5,0, math.pi*2, true);
ctx.closepath ();
ctx.fill ();
}
// 선을 그립니다
함수 드로 라인 (startx, Starty, Endx, Endy)
{
ctx.beginpath ();
ctx.linecap = "라운드";
ctx.moveto (startx, Starty);
ctx.lineto (endx, endy);
ctx.stroke ();
}
핵심 사항 :
ctx.linecap = round; 그리기 선 끝에서 스타일 캡을 원으로 설정합니다. 이것은 매우 중요합니다. 그렇지 않으면 라인 각도가 크게 변하는 장소에 밴드가 부러 질 것입니다.
event.preventDefault (); 이벤트의 기본 동작을 취소합니다. 이 방법은 슬라이딩 이벤트 중에 조정해야합니다. 그렇지 않으면 슬라이딩시 브라우저의 기본 슬라이딩 이벤트가 트리거되고 페이지 드롭 다운 효과가 발생하며이를 그릴 수 없습니다.