HTML5その12-加速度センサでお絵かき

改良版です改良箇所はハイライト表示しています．
<!DOCTYPE html>
<html>
<head>
<title>DeviceGravity</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 = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var myX = 0;
var myY = 0;

var grX =0;
var grY =0;
//---スマホのOS取得

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

//---

//----以下加速度検出用
window.addEventListener("devicemotion", function(evt){//これの反応をみててください，その反応がdevidemotionという種類であればその値をevtに入れなさい
grX = evt.accelerationIncludingGravity.x;  // evtのx軸の傾きを出してgrXに入れなさい
grY = evt.accelerationIncludingGravity.y;  // evtのx軸の傾きを出してgrXに入れなさい
//重力なので出力される値は-9.8~9.8（G)です

//以下iPhoneの時の挙動
if (ua.indexOf("iPad") >= 0 || ua.indexOf("iPhone") >= 0 || ua.indexOf("iPod") >= 0){
myX = myX + grX * 2;//myXの値に傾きを足す
myY = myY + grY * -2;//myYの値に傾きをを足す
}

//以下Androidの時の挙動
if (ua.indexOf("Android") >= 0){
myX = myX + grX * -2;//myXの値に傾きを足す
myY = myY + grY * 2;//myYの値に傾きをを足す
}


});
//---------

function draw() {

//--以下真ん中に表示させる用
if(myX < -130){
myX = -130;
}

if(myX > 130){
myX = 130;
}

if(myY < -130){
myY = -130;
}
if(myY > 130){
myY = 130;
}
//----

//ランダム色で塗るrandom color
context.fillStyle = '#'+ Math.floor(Math.random()*16777215).toString(16);//Math.floorはもらった数で小さい方の整数を出す．10.9なら10　-5.9なら-6. Math.randomは０〜１のランダム値を実数で出す．なのでfloat扱い．それにフルカラーの数1677万をかけて，toString(16)で16進数に変更する．個人的にはRGB別々に色を扱っていないので強引なやり方に見えます

context.beginPath();//線を描き始めます
context.arc((myX + 150),(myY + 150),(Math.random()*30),0,Math.PI*2,false);
//context.arc(myX,myY,(Math.random()*10),0,Math.PI*2,false);//円形はmyX,myYの位置から，1〜0の乱数出して，乱数小さいんで10倍して，ラジアンで0度の位置から始めて，Math.PI*2はラジアンで言うところの１＝すなわち360度で描き終えて，描く方向は反時計回りやで
context.fill();//塗りつぶせ
}
setInterval(draw, 10);//10msec起きに描いてね

//---ファイルに書き出すよう

function screenshot(){
  var png = canvas.toDataURL();
  document.getElementById("newImg").src = png;
}
//---

</script>

<form>
<input type="button" value="画像に変換" onclick="screenshot()">
</form>
<div><img id="newImg"></div>
<!-- このDIVのIDを探してここに画像を入れる -->
</body>
</html>
24行目で動作しているデバイスの情報を取得し，35〜44行目でAndoridとiPhone等と別々の挙動をさせています．