「プログラミングお作法」カテゴリーアーカイブ

HTML5, JavaScript, プログラミングお作法

HTML5入門その20-写真にお絵かき1

2014/10/24 admin

HTML5についてはこのカメラにお絵かきで一旦終了します．

ここでは，まずカメラを起動して画像をcanvasに読み込みます．

そのために，ライブラリを使用します．ライブラリは便利機能を別のファイルに記述しておいて呼び出すというものです．代表的なものにjQueryがあります．

今回は，画像処理関係でiphoneに起きるトラブルを解消してくれるライブラリです．

ここをクリックし，開いたファイルをそのままの名前（megapix-image.js）で保存してください．（Macのみ）

Windowsの場合は，どうすればいいのか分かりませんが，改行されないで保存できるようにいろいろやってみてください．

たぶん開いてテキストエディタにコピペして，指定の名前で保存かと．

これを，いまから作成するHTMLファイルと同じ階層に配置します．

ここまでが準備です．

HTML5, JavaScript, プログラミングお作法

HTML5入門その19-タッチでお絵かき4

2014/10/23 admin

タッチお絵かきもまもなく終了です．

まずは現在のプログラムに以下のパーツを追加して，いろいろな色で塗れるようにしてみましょう．AとBの両方を追加してください．どこに入れるかは，考えてみましょう．

A 　<script type=”text/javascript”> 〜　</script>の間に入れるスクリプト

（１）変数設定を増やす

var myColor = "rgb(255,0,0)";
var myLine = 0;

（２）このfunctionをどこかに

function myWidth(myWidth){
myLine = myWidth;
}

（３）このfunction達をどこかに

function myRed(){
myColor = "rgb(255,0,0)";	
}
function myGreen(){
myColor = "rgb(0,255,0)";	
}
function myBlu(){
myColor = "rgb(0,0,255)";	
}
function myYel(){
myColor = "rgb(255,255,0)";	
}
function myGray(){
myColor = "rgb(128,128,128)";	
}
function myBlack(){
myColor = "rgb(0,0,0)";	
}

（４）context.strokeStyleをコメントアウトし（頭に// つけて無効にする）代わりに下記2行目のを追加．これで変数myColorの色に変更できる（PC用とスマホ用では処理しているfunctionが違うのに注意　つまりfunction draw()のところだけでなく，スマホ用の部分も変更しよう）

//context.strokeStyle = "rgba(255,0,0,1)";
context.strokeStyle = myColor

（５）

context.lineWidthをコメントアウトし下記の2行目を追加

（PC用とスマホ用では処理しているfunctionが違うのに注意）

//context.lineWidth = 1;//線の太さ
context.lineWidth = myLine;

B　</script>〜</body>の間に入れるスクリプト

<form>
<input type="button" value="RED" onclick="myRed()">
<input type="button" value="GREEEN" onclick="myGreen()">
<input type="button" value="BLUE" onclick="myBlu()">
<input type="button" value="YELLOW" onclick="myYel()">
<input type="button" value="GRAY" onClick="myGray()">
<input type="button" value="BLACK" onClick="myBlack()">
</form>
</ br>
<pre>
線の太さ<input id="myRange" value="1" type="range" max="10" min="1" step="0.1" onChange="myWidth(this.value)" />
</pre>
<hr>

これでうまくいけばiPhoneでもAndroidでもどちらでも使えるスマホ用（PCも動くと思います）お絵かきツールができます

HTML5, JavaScript, プログラミングお作法

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

2014/10/21 admin

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の時の挙動を分けています．

HTML5, JavaScript, プログラミングお作法

HTML入門その17-タッチでお絵かき２

2014/10/21 admin

それではソースです．

例によって完璧にはなっていません

<!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のマウス入力の挙動
//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;
	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 screenshot(){
  var png = canvas.toDataURL();
  document.getElementById("newImg").src = png;//newImgeというIDを探してPNG入れてね
}
//---

</script>

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

102行目の　oldX = atai.touches[0].clientX – canvas.offsetLeft;

touche[0]は1本指でタッチという意味です．

ただ，このままでは線を描いた時にスクロールしてうまく行きません．

そこで，

atai.preventDefault();

を101と102行目の間に入れます．

HTML5, JavaScript, プログラミングお作法

HTML入門その16-タッチでお絵かき1

2014/10/21 admin

スマートホンでタッチした座標を取り出す仕組みを組み込んでみましょう

構文は

canvas.addEventListener(“touchstart”,myTouchStart,false);

です．

このcanvasはすでに

canvas = document.getElementById(“myCanvas”);

で指定していますね．

canvas.addEventListener(“touchstart”,myTouchStart,false);

平たくいうと「反応検出器(EventListner)を追加（add）して，そのうち”touchstart”という反応が出たら」という意味でしょうか．

canvas.addEventListener(“touchstart”,myTouchStart,false);

myTouchStarというfuctionを実行してね．

で最後のfalseはこういうものだと思ってください．どの説明みてもよく分かりません，，，気になる方はキャプチャリングフェーズとか補足フェーズで検索してみてください．

HTML5, JavaScript, プログラミングお作法, 未分類

HTML5入門その15-お絵かきツール3

2014/10/21 admin

PC版での入力はマウスを使いました．

このマウス入力は

canvas.addEventListener("mousemove", draw, true);//マウスが動いたとき波drawをやりな
canvas.addEventListener("mousedown", myMove, false);//マウスが押された時はmyMoveをやりな
canvas.addEventListener("mouseup", myMouseUp, false);//マウスが上がったときはmtMouseUpをやっとかめ

で取得しました．

スマートホンでマウスは使えませんから，タッチイベントというものを使います．

canvas.addEventListener("touchmove",myTouchDraw,true);
canvas.addEventListener("touchstart",myTouchStart,false);
canvas.addEventListener("touchend",myTouchEnd,false);

では，スマートホン用に改造してみましょう〜

HTML5, JavaScript, プログラミングお作法, 未分類

HTML5入門その14-お絵かきツール2

2014/10/21 admin

お絵かきツール（PC版）です

<!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;//pantSwitchというスイッチを作ってとりあえず最初はオフね
var oldX = 0;//クリック始めた位置のX座標を入れる
var oldY = 0;//クリック始めた位置のY座標を入れる

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


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

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


//---------
window.onload = function() {//これを読み込んだら
 syokika();//初期化というfunctionを実行してね
};

function syokika(){//で，これが初期化のfunction
canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
canvas.addEventListener("mousemove", draw, true);//マウスが動いたとき波drawをやりな
canvas.addEventListener("mousedown", myMove, false);//マウスが押された時はmyMoveをやりな
canvas.addEventListener("mouseup", myMouseUp, false);//マウスが上がったときはmtMouseUpをやっとかめ


}

function myMove(atai){//クリック開始時に実行させて線の描き始めの場所をoldX,oldYに入れちゃうよfunction
        paintSwitch = true;
        oldX = atai.clientX - canvas.offsetLeft;//オフセット（ずれ）の修正＝よこ clientXの代わりにpageXを使うときもあるらしい
        oldY = atai.clientY - canvas.offsetTop;//オフセット（ずれ）の修正＝たて　clientYの代わりにpageYを使うときもあるらしい
}

function myMouseUp(){
		paintSwitch = false;//pantSwitchはオフね
}

//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 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>

次に，これをスマートホン版で作ってみます

HTML5, JavaScript, プログラミングお作法, 未分類

HTML5入門その13-お絵かきツール1

2014/10/21 admin

マウス入力を利用してお絵かきツールを作りましょう（これはPC用）

以下をコピペしてPCで実行してみましょう

<!DOCTYPE html>
<html>
<head>
<title>Mouse 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>Mouse paint</h1>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #000000;"></canvas>

<script type="text/javascript">
var canvas;
var paintSwitch = false;//pantSwitchというスイッチを作ってとりあえず最初はオフね
var oldX = 0;//クリック始めた位置のX座標を入れる
var oldY = 0;//クリック始めた位置のY座標を入れる

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


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

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


//---------
window.onload = function() {//これを読み込んだら
 syokika();//初期化というfunctionを実行してね
};

function syokika(){//で，これが初期化のfunction
canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
canvas.addEventListener("mousemove", draw, true);//マウスが動いたとき波drawをやりな
canvas.addEventListener("mousedown", myMove, false);//マウスが押された時はmyMoveをやりな
canvas.addEventListener("mouseup", myMouseUp, false);//マウスが上がったときはmtMouseUpをやっとかめ


}

function myMove(atai){//クリック開始時に実行させて線の描き始めの場所をoldX,oldYに入れちゃうよfunction
        paintSwitch = true;
        oldX = atai.clientX;//clientXの代わりにpageXを使うときもあるらしい
        oldY = atai.clientY;//clientYの代わりにpageYを使うときもあるらしい
}

function myMouseUp(){
		paintSwitch = false;//pantSwitchはオフね
}

//setInterval(draw, 10);//10msec起きに描いてね　今回は使いません

function draw(atai) {
if (!paintSwitch) return;
	var x = atai.clientX;
    var y = atai.clientY;
    //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 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>

うまく動きませんね．

原因は何でしょうか？

オフセットをとるコマンドがあります．まずこれを入れてみましょう．

どこに？

	var x = atai.clientX - canvas.offsetLeft;

64行目です．

うまく行くなら65行目も改変してみましょう．

開始点がおかしくなりますね．

開始点はoldX,oldYですがこれを代入しているfunctionは50〜54行目です．

ここも修正しましょう．

HTML5, JavaScript, プログラミングお作法

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

2014/10/14 admin

改良版です改良箇所はハイライト表示しています．

<!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等と別々の挙動をさせています．

HTML5, JavaScript, プログラミングお作法

HTML5入門その11-加速度センサで描く

2014/10/13 admin

加速度センサを使って抽象画というかミニマルアートっぽいのを描きます

<!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");




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

myX = myX + grX;//myXの値に傾きを足す
myY = myY + grY;//myYの値に傾きをを足す(iPhoneならここに-1をかけ算する）
 
});
//---------

function draw() {

if(myX < 0){
myX = 0;
}

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

if(myY < 0){
myY = 0;
}
if(myY > 320){
myY = 320;
}

//ランダム色で塗る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,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毎に描いてね

</script>


<div id="screen"></div>
</body>
</html>

2カ所間違えているのでこのままでは動作しません．グローバル変数とローカル変数に気をつけて，どこが間違っているのかよく探してみましょう．

誤りを見つけて修正してみてください．

A <script type=”text/javascript”> 〜 </script>の間に入れるスクリプト

B </script>〜</body>の間に入れるスクリプト

A 　<script type=”text/javascript”> 〜　</script>の間に入れるスクリプト

B　</script>〜</body>の間に入れるスクリプト