マウス入力を利用してお絵かきツールを作りましょう（これは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行目です．
ここも修正しましょう．