72
73 ３） JavasSript で描画の為の変数初期設定を行います。
４） 次に描画の為の関数で、ツールの設定をします。
本文内の記述
<div id="page">
<h1 style="color:#FF0;">CANVASで描画エリアをつくる</h1><br>
<div class="cont">
<canvas id="testCanvas" width="800px" height="500px" style="border:3px solid #CCC;
background-color::#FFF; "></canvas>
</div>
<div class="form">
<!—キャンバス内で使える線の太さと、色をボタンで選択する-->
線の太さ：
<input name="mode" type="radio" value="0" id="li1" onClick="LineW(5)" />
<label for="li1">細</label>
<input name="mode" type="radio" value="1" id="li2" onClick="LineW(10)" />
<label for="li2">中</label>
<input name="mode" type="radio" value="2" id="li3" onClick="LineW(15)" />
<label for="li3">太</label><br>
線の色 ：
<input name="mode2" type="radio" value="0" id="co1" onClick="ColoR('#FF0000')" />
<label for="co1">赤</label>
<input name="mode2" type="radio" value="1" id="co2" onClick="ColoR('#0000CC')" />
<label for="co2">青</label>
<input name="mode2" type="radio" value="2" id="co3" onClick="ColoR('#00FF00');" />
<label for="co3">緑</label>
<input name="mode2" type="radio" value="3" id="co4" onClick="ColoR('#FFFF00');" />
<label for="co4">黄</label>
<input name="mode2" type="radio" value="4" id="co5" onClick="ColoR('#000000');" />
<label for="co5">黒</label>
<!—キャンバスに描いたものを下のエリアで、pngの画像に変換して保存可能にする。。-->
<input type="button" onclick="addImageData();" value="↓画像に変換する（PNG)↓"/>
<input type="button" onclick="clearCanvas();" value="画面をクリアする"/>
</div>
74
５） 画像の返還の為の関数設定や、ラジオボタンで指定された線や色をツールに反映させます。
６） マウス・タッチで描画する際の関数を設定します。
描画の JavaScript(前半の描画ツール部分）
<script type="text/javascript">
var canvas; //キャンバス var ctx; //キャンバスコンテキスト var cW = 800; //キャンバス横サイズ var cH = 500; //キャンバス縦サイズ var mouseX = new Array();
var mouseY = new Array();
var mouseDownFlag = false; //マウスダウンフラグ var lineL = 5; //線の太さ
var color = "#cc0000"; //色 var touchCount = 0;
window.onload = function() { init();
};
function init() {
//キャンバスの初期処理（DOM)
canvas = document.getElementById('testCanvas');
if ( ! canvas || ! canvas.getContext ) return false;
//2Dコンテキスト
ctx = canvas.getContext('2d');
//マウスイベント
canvas.addEventListener("mousedown", mouseDownListner, false);
canvas.addEventListener("mousemove", mouseMoveListner, false);
canvas.addEventListener("mouseup", mouseUpListner, false);
canvas.addEventListener("mouseout", mouseOutListner, false);
canvas.addEventListener("touchstart", mouseDownListner, false);
canvas.addEventListener("touchmove", mouseMoveListner, false);
canvas.addEventListener("touchend", mouseUpListner, false);
canvas.addEventListener("touchcancel", mouseOutListner, false);
//画像変換
addImageData();
//ラジオボタンデーターの受取
var li = document.getElementById('li1');
li.checked = true;
var co= document.getElementById('co1');
co.checked =true;
}
75
描画の JavaScript(後半の描画の関数部分１)
//画像変換
function addImageData() { try {
var img_png_src = canvas.toDataURL();
document.getElementById("image_png").src = img_png_src;
} catch(e) {
document.getElementById("image_png").alt = "未対応";
} }
//線の太さ
function LineW(n) { lineL = n;
}
//色の変更
function ColoR(n) { color = n;
}
//クリア
function clearCanvas() { //表示クリア
ctx.clearRect(0, 0, cW, cH);
//画像描画
addImageData();
}
//マウスイベント1マウスダウン
function mouseDownListner(e) { mouseDownFlag = true;
}
function mouseMoveListner(e) { if (mouseDownFlag) {
//縦スクロールをしない（iPad & iPhone）
e.preventDefault();
//座標調整 adjustXY(e);
//円を描く
for (i = 0; i < mouseX.length; i++) { ctx.beginPath();
ctx.fillStyle = color;
ctx.arc(mouseX[i], mouseY[i], lineL , 0, Math.PI * 2, false);
ctx.fill();
} }
}
function mouseUpListner(e) { mouseDownFlag = false;
}
function mouseOutListner(e) { mouseDownFlag = false;
}
76
７） 同じくマウス/タッチを外した時の挙動を関数で設定します。
８） 描画範囲の座標と、モバイルの為の UA を設定します。
９） 最後に Javascript を閉じて、レイアウトに使う DIV を閉じただ出来上がりです。
描画の JavaScript(後半の描画の関数部分２)
//マウスイベント２マウスアップ function mouseUpListner(e) {
mouseDownFlag = false;
}
function mouseOutListner(e) { mouseDownFlag = false;
}
//座標調整
function adjustXY(e) {
var rect = e.target.getBoundingClientRect();
//配列クリア
mouseX.splice(0, mouseX.length);
mouseY.splice(0, mouseY.length);
//ユーザーエージェント
var isiPad = navigator.userAgent.match(/iPad/i) != null;
var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
var isAndroid = navigator.userAgent.match(/Android/i) != null;
//座標取得
if (isiPad || isiPhone || isAndroid) { //iPad & iPhone用処理 for (i = 0; i < 5; i++) {
if (event.touches[i]) {
mouseX[i] = e.touches[i].pageX - rect.left;
mouseY[i] = e.touches[i].pageY - rect.top;
} }
} else {
//PC用処理
mouseX[0] = e.clientX - rect.left;
mouseY[0] = e.clientY - rect.top;
} }
</script>
</div>
</div>
77