この記事はtomowarkar ひとりAdvent Calendar 2019の14日目の記事です。

はじめに

昔に描いたコードを持ってきたので、コードが少し古く、初心者感丸出しですがご容赦を。

スマートフォンに対応させたのがポイントです。

デモサイト

デモサイト

コード全文

index.html

描画エリア設定
カラーパッド設定
削除ボタン設定

<!doctype html>
<html>
	<head>
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
		<title></title>
	</head>
	<body>
		<div id="hitarea"><canvas id="canvas"></canvas></div>
		<input type="color" id="color" value="#ff7f7f">
		<input type="button" id="removePaint" value="clear" onclick="removePaint()">
	</body>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</html>

style.css

style.css

body {
	margin: 0;
	overflow: hidden;
}
#color{
	position: absolute;
	margin: 0;
	width: 54px;
	height:58px;
	right: 10px;
	bottom: 60px;
	border: none;
	background: none;
}
#removePaint{
	position: absolute;
	margin: 0;
	width: 50px;
	height:50px;
	right: 15px;
	bottom: 10px;
	background: lightgray;
}

script.js

script.js

var canvas = document.getElementById( 'canvas' );
var ctx = document.getElementById("canvas").getContext("2d");
canvas.width  = window.innerWidth;
canvas.height = window.innerHeight;

function drawCoordinates(x,y,mouseX,mouseY){
	ctx.beginPath();
	ctx.moveTo(mouseX, mouseY);
	ctx.lineTo(x, y);
	ctx.lineCap = "round";
	ctx.lineWidth = 10;
	ctx.strokeStyle = defocolor;
	ctx.closePath();
	ctx.stroke();
	mouseX = x;
	mouseY = y;
}

var $document = $(document);
var $hitarea = $('#hitarea');
var $x = $('#x');
var $y = $('#y');
var supportTouch = 'ontouchend' in document;// タッチイベントが利用可能かの判別

var EVENTNAME_TOUCHSTART = supportTouch ? 'touchstart' : 'mousedown';
var EVENTNAME_TOUCHMOVE = supportTouch ? 'touchmove' : 'mousemove';
var EVENTNAME_TOUCHEND = supportTouch ? 'touchend' : 'mouseup';

var mouseX = "";
var mouseY = "";

var updateXY = function(event) {
	var original = event.originalEvent;
	var x, y;
	if(original.changedTouches) {
		x = original.changedTouches[0].pageX;
		y = original.changedTouches[0].pageY;
	} else {
		x = event.pageX;
		y = event.pageY;
	}
	$x.text(x);
	$y.text(y);
	return [x,y];
};

// イベント設定
var handleStart = function(event) {
	event.preventDefault();// タッチによる画面スクロールを止める
	[x,y] = updateXY(event);
	mouseX = x;
	mouseY = y;
	bindMoveAndEnd();
};
var handleMove = function(event) {
	event.preventDefault(); // タッチによる画面スクロールを止める
	[x,y] = updateXY(event);
	drawCoordinates(x,y,mouseX,mouseY)
	mouseX = x;
	mouseY = y;
};
var handleEnd = function(event) {
	[x,y] = updateXY(event);
	drawCoordinates(x,y,mouseX,mouseY)
	mouseX = "";
	mouseY = "";
	unbindMoveAndEnd();
};
var bindMoveAndEnd = function() {
	$document.on(EVENTNAME_TOUCHMOVE, handleMove);
	$document.on(EVENTNAME_TOUCHEND, handleEnd);
};
var unbindMoveAndEnd = function() {
	$document.off(EVENTNAME_TOUCHMOVE, handleMove);
	$document.off(EVENTNAME_TOUCHEND, handleEnd);
};

$hitarea.on(EVENTNAME_TOUCHSTART, handleStart);

let defocolor = "#ff7f7f";
function watchColorPicker(event) {
	defocolor = event.target.value;
}
document.querySelector("#color").addEventListener("change", watchColorPicker, false);

function removePaint() {
	ctx.beginPath();
	ctx.fillStyle = "#FFFFFD";
	ctx.fillRect(0, 0, canvas.width,canvas.height);
}

おわりに

以上明日も頑張ります！！
tomowarkar ひとりAdvent Calendar Advent Calendar 2019

参考