HTML入門その18-タッチでお絵かき３

iPhoneとAndroid（nexus7）で動作確認しました．
<!DOCTYPE html>
<html>
<head>
<title>touch paint</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<!-- metaタグで　スマホの挙動を制限している -->
</head>
<body>
<h1>Key2</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>

<script type="text/javascript">
var canvas;
var paintSwitch = false;
var oldX = 0;
var oldY = 0;

//---スマホのOS取得
var ua = navigator.userAgent;//User Agent（まぁ機種名みたいなの）を取得して変数uaに代入しなさい
//---


//以下iPhoneの時の挙動
if (ua.indexOf("iPad") >= 0 || ua.indexOf("iPhone") >= 0 || ua.indexOf("iPod") >= 0){
//特に挙動はまだ決めていない
}

//以下Androidの時の挙動
if (ua.indexOf("Android") >= 0){
//特に挙動はまだ決めていない
}


//---------
window.onload = function() {//これ読み込んだ時に，，，
 syokika();//syokikaを実行してね
};

function syokika(){//で，これがsyokikaね
canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

//--ここからPCのマウス入力の挙動（タッチが動作しているか確認のため以下3行コメントアウトしてますがPCで動作させる場合はコメントアウトを外してください
//canvas.addEventListener("mousemove", draw, true);
//canvas.addEventListener("mousedown", myMove, false);
//canvas.addEventListener("mouseup", myMouseUp, false);

//--ここからスマホのタッチの挙動＜−NEW!!
canvas.addEventListener("touchmove",myTouchDraw,false);
canvas.addEventListener("touchstart",myTouchStart,false);
canvas.addEventListener("touchend",myTouchEnd,false);
}

//--PCのマウス入力時の挙動
function myMove(atai){
        paintSwitch = true;
		
		oldX = atai.clientX - canvas.offsetLeft;//オフセット（ずれ）の修正＝よこ
        oldY = atai.clientY - canvas.offsetTop;//オフセット（ずれ）の修正＝たて
}

function myMouseUp(){
		paintSwitch = false;
}
//--PCの挙動ここまで

//--タッチの挙動ここから
function myTouchStart(atai){
        paintSwitch = true;
        oldX = atai.touches[0].pageX - canvas.offsetLeft;//オフセット（ずれ）の修正＝よこ
        oldY = atai.touches[0].pageY - canvas.offsetTop;//オフセット（ずれ）の修正＝たて
}

function myTouchEnd(){
		paintSwitch = false;
}
//--タッチの挙動ここまで


//setInterval(draw, 10);//10msec起きに描いてね

function draw(atai) {
if (!paintSwitch) return;
	var x = atai.clientX - canvas.offsetLeft;
    var y = atai.clientY - canvas.offsetTop;
    //var can = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.strokeStyle = "rgba(255,0,0,1)";
    context.lineWidth = 1;
    context.beginPath();
    context.moveTo(oldX, oldY);
    context.lineTo(x, y);
    context.stroke();
    context.closePath();
    oldX = x;
    oldY = y;
}

function myTouchDraw(atai) {
if (!paintSwitch) return;
	atai.preventDefault();//これすると縦スクロールがなくなる
	var x = atai.touches[0].pageX - canvas.offsetLeft;//なんかタッチの場合はpageXじゃないとだめ
    var y = atai.touches[0].pageY - canvas.offsetTop;//なんかタッチの場合はpageYじゃないとだめ
    //var can = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.strokeStyle = "rgba(255,0,0,1)";//16進数でなくこういう描き方もあります aはアルファ＝透明チャンネル
	//context.strokeStyle = "rgb(255,0,0)";//アルファでなくてもOK
    context.lineWidth = 1;//線の太さ
    context.beginPath();//線を描き始めます
    context.moveTo(oldX, oldY);//この点から
    context.lineTo(x, y);//この点まで
    context.stroke();//描いてね
    context.closePath();//線はここまで
    oldX = x;
    oldY = y;
}


//---画像に変換ボタンを押すとここにfunctionが実行される
function screenshot(){
  var myimage = canvas.toDataURL();
  
  //以下iPhoneの時の挙動　上の方で機種をグローバル変数uaに入れてあるのでifで機種が分かる
if (ua.indexOf("iPad") >= 0 || ua.indexOf("iPhone") >= 0 || ua.indexOf("iPod") >= 0){
  document.getElementById("newImg").src = myimage;//newImgeというIDを探してPNG入れてね
}

  
//以下Androidの時の挙動　上の方で機種をグローバル変数uaに入れてあるのでifで機種が分かる
if (ua.indexOf("Android") >= 0){
    //androimageというiDがあるimgタグのソース（URL入れるところ）に入れちゃう
    document.getElementById("androimage").src = myimage;
}

    

}
//---

</script>

<form>
<input type="button" value="画像に変換" onclick="screenshot()">
<!-- onclickでscreenshotというfunction実行してね -->
</form>
<div><img id="newImg"></div>
</ br>
<!-- このDIVのIDを探してここに画像を入れる -->
<img src="" id="androimage" width="300" height="300">

</body>
</html>
102行目に縦スクロールロックを入れてあります
120〜138行目は「画像に変換」ボタンを押したときに実行されます．ifを使ってAndroidとiPhoneの時の挙動を分けています．