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

まずは現在のプログラムに以下のパーツを追加して，いろいろな色で塗れるようにしてみましょう．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も動くと思います）お絵かきツールができます