\u30b9\u30de\u30db\u306e\u89d2\u5ea6\u3067\u8272\u304c\u5909\u308f\u308a\u307e\u3059<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<title>touch color<\/title>\r\n<meta charset=\"UTF-8\">\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no\">\r\n<!-- meta\u30bf\u30b0\u3067\u3000\u30b9\u30de\u30db\u306e\u6319\u52d5\u3092\u5236\u9650\u3057\u3066\u3044\u308b -->\r\n<meta http-equiv=\"Content-Style-Type\" content=\"text\/css\">\r\n<!--CSS\u3067\u4f59\u767d\u3092\u30bc\u30ed\u306b\u3057\u3066\u3044\u308b -->\r\n<style type=\"text\/css\">\r\nbody {\r\nmargin: 0px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<canvas id=\"myCanvas\"><\/canvas>\r\n\r\n<!-- \u2193\u3053\u3053\u304b\u3089Javascript -->\r\n<script type=\"text\/javascript\">\r\n\r\n\/\/\u5909\u6570\u7cfb\u3092\u521d\u671f\u8a2d\u5b9a\r\nvar canvas;\r\nvar context;\r\nvar myHue;\r\n\r\n\r\nwindow.onload = function() {\/\/\u3053\u308c\u8aad\u307f\u8fbc\u307f\u7d42\u308f\u3063\u305f\u3089\r\nsyokika();\/\/syokika\u3092\u5b9f\u884c\u3057\u3066\u306d\r\n}\r\n\r\nfunction syokika(){\/\/\u3053\u308c\u304csyokika\u306d\r\ncanvas = document.getElementById(\"myCanvas\");\/\/\u3069\u306ecanvas\u306b\u3059\u308b\u304b\u6307\u5b9a\r\ncanvas.width = window.innerWidth;\/\/\u5e45\u306f\u5168\u5e45\u3067\u3059\u3088\r\ncanvas.height = window.innerHeight;\/\/\u9ad8\u3055\u3082\u30d5\u30eb\u3067\r\ncontext = canvas.getContext(\"2d\");\/\/2\u6b21\u5143\u4ed5\u69d8\u3067\r\n\r\ncontext.fillStyle = \"rgb(0, 0, 0)\";\/\/\u5857\u308b\u6e96\u5099\u3088\uff01\u8272\u306fRGB\u30e2\u30c7\u30eb\u3067\u91cf\u306f\u305d\u308c\u305e\u308c\uff10\uff0c\uff10\uff0c\uff10\u306d\r\ncontext.fillRect(0, 0, canvas.width, canvas.height);\/\/\u306f\u3044\uff0c\uff10\uff0c\uff10\uff08\u5de6\u4e0a\uff09\u304b\u3089\uff0c\u5168\u5e45\uff0c\u5168\u9ad8\u3067\u5857\u3063\u3066\uff01\r\n}\r\n\r\nvar grX = 0;\r\nvar grY = 0;\r\nwindow.addEventListener(\"devicemotion\", function(evt){\/\/\u3053\u308c\u306e\u53cd\u5fdc\u3092\u307f\u3066\u3066\u304f\u3060\u3055\u3044\uff0c\u305d\u306e\u53cd\u5fdc\u304cdevidemotion\u3068\u3044\u3046\u7a2e\u985e\u3067\u3042\u308c\u3070\u305d\u306e\u5024\u3092evt\u306b\u5165\u308c\u306a\u3055\u3044\r\ngrX = evt.accelerationIncludingGravity.x; \/\/ evt\u306ex\u8ef8\u306e\u50be\u304d\u3092\u51fa\u3057\u3066grX\u306b\u5165\u308c\u306a\u3055\u3044\r\ngrY = evt.accelerationIncludingGravity.y; \/\/ evt\u306eY\u8ef8\u306e\u50be\u304d\u3092\u51fa\u3057\u3066grX\u306b\u5165\u308c\u306a\u3055\u3044\r\n\/\/\u91cd\u529b\u306a\u306e\u3067\u51fa\u529b\u3055\u308c\u308b\u5024\u306f-9.8~9.8\uff08G)\u3067\u3059\r\n\r\n});\r\n\r\n\r\nsetInterval(mydraw, 100);\/\/10msec\u6bce\u306b\u63cf\u3044\u3066\u306d\r\n\r\nfunction mydraw(){\r\n var myHue = (((grY + 9.8)\/19.6)*180)*2;\/\/\u6a2a\u4f4d\u5024\u3092\u30b9\u30af\u30ea\u30fc\u30f3\u5e45\u3067\u5272\u3063\u305f\u5024\u306b360\u3092\u639b\u3051\u3066\u8272\u76f8\u3064\u304f\u308amyHue\u306b\u5165\u308c\u308b\r\n var myBri = ((grX + 9.8)\/19.6)*100;\/\/\u7e26\u4f4d\u7f6e\u3092\u30b9\u30af\u30ea\u30fc\u30f3\u9ad8\u3067\u5272\u3063\u305f\u5024\u306b100\u3092\u639b\u3051\u3066myBri\u306b\u660e\u308b\u3055\u3092\u5165\u308c\u308b\r\n \r\n \/\/\/\/\/\/\/---\u3053\u3053\u306b\u63cf\u753b\u3059\u308b\u8981\u7d20\u3092\u66f8\u304f\r\n \/\/ context.fillStyle = \"hsl(\" + myHue + \", 100%, 50% )\"; \/\/HSL\u5024\uff08\u8272\u76f8\u3001\u5f69\u5ea6\u3001\u8f1d\u5ea6\uff09\u3092\u6307\u5b9a\r\n context.fillStyle = \"hsl(\" + myHue + \", 100%, \" + myBri + \"% )\"; \/\/HSL\u5024\uff08\u8272\u76f8\u3001\u5f69\u5ea6\u3001\u8f1d\u5ea6\uff09\u3092\u6307\u5b9a\r\n\tcontext.beginPath();\r\n \tcontext.arc(canvas.width\/2, canvas.height\/2, 150, 0, Math.PI*2, true);\r\n\tcontext.fill();\r\n\t}\r\n\r\n\r\n<\/script><!-- \u2191\u3053\u3053\u307e\u3067Javascript -->\r\n<\/body>\r\n<\/html><\/pre>\n\u30b5\u30f3\u30d7\u30eb\u2212\uff1ehttp:\/\/filmm.info\/touch\/touchcolor6.html<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\u30b9\u30de\u30db\u306e\u89d2\u5ea6\u3067\u8272\u304c\u5909\u308f\u308a\u307e\u3059 <!DOCTYPE html> <html> <head> <title>touch color<\/title> <meta … \u7d9a\u304d\u3092\u8aad\u3080 \u89d2\u5ea6\u3067\u8272\u304c\u5909\u308f\u308b\uff08\u52a0\u901f\u5ea6\uff09<\/span>