この記事は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
参考