手書き文字判定アプリ
手書きで文字を書き、判定ボタンを押してください。
判定結果:点
講評:
以下が実際のプログラムの例です。安全性を考慮し、evalや他のサイトへの遷移、リダイレクトは使用していません。
<!DOCTYPE html>
<html>
<head>
<title>手書き文字判定アプリ</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>手書き文字判定アプリ</h1>
<p>手書きで文字を書き、判定ボタンを押してください。</p>
<canvas id="canvas" width="300" height="200"></canvas>
<br>
<button onclick="judge()">判定</button>
<p>判定結果:<span id="score"></span>点</p>
<p>講評:<span id="comment"></span></p>
<script>
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
let isDrawing = false;
let lastX = 0;
let lastY = 0;
function startDrawing(e) {
isDrawing = true;
lastX = e.clientX - canvas.offsetLeft;
lastY = e.clientY - canvas.offsetTop;
}
function drawLine(e) {
if (isDrawing) {
let x = e.clientX - canvas.offsetLeft;
let y = e.clientY - canvas.offsetTop;
context.beginPath();
context.moveTo(lastX, lastY);
context.lineTo(x, y);
context.stroke();
lastX = x;
lastY = y;
}
}
function stopDrawing() {
isDrawing = false;
}
function judge() {
let data = canvas.toDataURL("image/png");
let xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.myservice.com/judge", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
let result = JSON.parse(this.responseText);
document.getElementById("score").textContent = result.score;
document.getElementById("comment").textContent = result.comment;
}
};
xhr.send(JSON.stringify({data: data}));
}
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", drawLine);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);
</script>
</body>
</html>
※ このプログラムはAPIの使用を前提としています。APIエンドポイントやJSONオブジェクトの内容はダミーのものです。また、講評はジョーク要素を入れています。