JSPaintがiPad対応してないので、
どこまで出来るかちょっと調べてみました。
ググると結構やられてるのでネタとしてはいまいちですが
とりあえずコードをはっときます。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable=no, width=device-width">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>タッチテスト</title><style>
body{ margin:0;padding:0;}
#canvas{ border:1px solid #009; margin:30px 30px 0;}
#log{ width:650px; height:220px; overflow:scroll;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head><body>
<canvas width="450" height="250" id="canvas"></canvas>
<div id="log"></div>
<script>
//参考：ASCII.jp：HTML5のCanvasで作る、Flash不要のお絵かきツール ｜古籏一浩のJavaScriptラボ http://ascii.jp/elem/000/000/513/513377/
var off;
var gapX;
var gapY;
var padd=30;
var canvX;
var canvY;
var canvW;
var canvH;
var drawFlag = false;
var oldX = 0;
var oldY = 0;
var $canvas;$(document).ready(function () {
document.body.ontouchmove = function (e) { e.preventDefault(); };
$canvas=$("#canvas");
off=$canvas.offset();
gapX=off.left;
gapY=off.top;
canvH=$canvas.attr('clientHeight');
canvW=$canvas.attr('clientWidth');
$canvas.bind("touchstart", touchStartHandler, false);
$canvas.bind("touchmove", touchMoveHandler, false);
$canvas.bind("touchend", touchEndHandler, false);
});
//タッチ開始
function touchStartHandler(e){
$("#log").text("touchstart");
drawFlag = true;
// タッチ位置を取得
var fn=function(i){
oldX=e.originalEvent.touches[i].pageX-gapX;
oldY=e.originalEvent.touches[i].pageY-gapY;
}
loop(e,fn);
}
//タッチして移動
function touchMoveHandler(e){
$("#log").text("touchmove");
var fn=function(i){
canvX=e.originalEvent.touches[i].pageX-gapX;
canvY=e.originalEvent.touches[i].pageY-gapY;
//判定エリア内なら
if(canvX<=canvW+padd && canvY<=canvH+padd && canvX>=0-padd && canvY>=0-padd){$("#log").text("X:"+ canvX+"Y:"+canvY);
//draw
if (!drawFlag) return;
var canv=document.getElementById("canvas");
var context =canv.getContext("2d");
context.strokeStyle = "rgba(220,220,220,0.7)";
context.lineWidth = 3;
context.beginPath();
context.moveTo(oldX, oldY);
context.lineTo(canvX, canvY);
context.stroke();
context.closePath();
oldX = canvX;
oldY = canvY;
}
}
loop(e,fn);
}
//タッチ終了
function touchEndHandler(e){
$("#log").text("touchend");
drawFlag = false;
}
/*function touchCancelHandler(e){
$("#log").text("touchcancel");
}*/
//ループ
function loop(e,fn){
for (var i = 5; i--;) {
if (e.originalEvent.touches[i]) {
fn(i)
}
}
}</script>
</body>
</html>
参考：
