スマホの角度で色が変わります
<!DOCTYPE html>
<html>
<head>
<title>touch color</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タグで スマホの挙動を制限している -->
<meta http-equiv="Content-Style-Type" content="text/css">
<!--CSSで余白をゼロにしている -->
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<!-- ↓ここからJavascript -->
<script type="text/javascript">
//変数系を初期設定
var canvas;
var context;
var myHue;
window.onload = function() {//これ読み込み終わったら
syokika();//syokikaを実行してね
}
function syokika(){//これがsyokikaね
canvas = document.getElementById("myCanvas");//どのcanvasにするか指定
canvas.width = window.innerWidth;//幅は全幅ですよ
canvas.height = window.innerHeight;//高さもフルで
context = canvas.getContext("2d");//2次元仕様で
context.fillStyle = "rgb(0, 0, 0)";//塗る準備よ！色はRGBモデルで量はそれぞれ０，０，０ね
context.fillRect(0, 0, canvas.width, canvas.height);//はい，０，０（左上）から，全幅，全高で塗って！
}
var grX = 0;
var grY = 0;
window.addEventListener("devicemotion", function(evt){//これの反応をみててください，その反応がdevidemotionという種類であればその値をevtに入れなさい
grX = evt.accelerationIncludingGravity.x; // evtのx軸の傾きを出してgrXに入れなさい
grY = evt.accelerationIncludingGravity.y; // evtのY軸の傾きを出してgrXに入れなさい
//重力なので出力される値は-9.8~9.8（G)です
});
setInterval(mydraw, 100);//10msec毎に描いてね
function mydraw(){
var myHue = (((grY + 9.8)/19.6)*180)*2;//横位値をスクリーン幅で割った値に360を掛けて色相つくりmyHueに入れる
var myBri = ((grX + 9.8)/19.6)*100;//縦位置をスクリーン高で割った値に100を掛けてmyBriに明るさを入れる
///////---ここに描画する要素を書く
// context.fillStyle = "hsl(" + myHue + ", 100%, 50% )"; //HSL値（色相、彩度、輝度）を指定
context.fillStyle = "hsl(" + myHue + ", 100%, " + myBri + "% )"; //HSL値（色相、彩度、輝度）を指定
context.beginPath();
context.arc(canvas.width/2, canvas.height/2, 150, 0, Math.PI*2, true);
context.fill();
}
</script><!-- ↑ここまでJavascript -->
</body>
</html>