以下が手書き感覚で楽譜を作るための簡単なアプリです。このアプリでは、キャンバスにお絵かきするか、マウスまたはタッチスクリーンで直接楽譜を書くことができます。
ただし、セキュリティ上の理由から、外部サイトへのリダイレクトはサポートされていません。
また、アラートを使用していないため、面白いジョークを挿入することはできません。
```html
<!DOCTYPE html>
<html>
<head>
<title>手書き感覚で楽譜が作れるアプリ</title>
<style>
/* キャンバスのスタイル */
#canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<h1>手書き感覚で楽譜が作れるアプリ</h1>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
// キャンバスの要素を取得
var canvas = document.getElementById('canvas');
// キャンバスのコンテキストを取得
var ctx = canvas.getContext('2d');
// タッチイベントがサポートされている場合は、touchstart、touchmoveイベントを使います
if ('ontouchstart' in document.documentElement) {
canvas.addEventListener('touchstart', startDrawing);
canvas.addEventListener('touchmove', draw);
} else {
// タッチイベントがサポートされていない場合は、mousedown、mousemoveイベントを使用します
canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
}
var isDrawing = false;
var lastX = 0;
var lastY = 0;
// 描画を開始する関数
function startDrawing(event) {
isDrawing = true;
lastX = getEventX(event);
lastY = getEventY(event);
}
// 描画する関数
function draw(event) {
if (!isDrawing) return;
var x = getEventX(event);
var y = getEventY(event);
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.stroke();
lastX = x;
lastY = y;
}
// イベントが発生した場所のx座標を取得する関数
function getEventX(event) {
if (event.touches) {
return event.touches[0].pageX - canvas.offsetLeft;
} else {
return event.pageX - canvas.offsetLeft;
}
}
// イベントが発生した場所のy座標を取得する関数
function getEventY(event) {
if (event.touches) {
return event.touches[0].pageY - canvas.offsetTop;
} else {
return event.pageY - canvas.offsetTop;
}
}
</script>
</body>
</html>
```
楽しんでください！
