以下が実装例です。セキュリティ脆弱性を避けるため、JavaScriptのevalや他のサイトへの遷移、リダイレクトは行いません。また、alertも使用しません。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Disney風キャラクタ作成アプリ</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
h1 {
font-size: 3em;
text-align: center;
margin-top: 50px;
}
canvas {
display: block;
margin: 0 auto;
border: 2px solid black;
}
button {
display: block;
margin: 20px auto 50px auto;
padding: 10px 20px;
font-size: 1.2em;
background-color: #008cba;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Disney風キャラクタ作成アプリ</h1>
<canvas id="canvas" width="300" height="300"></canvas>
<button onclick="saveCharacter()">キャラクタ保存</button>
<script>
// ランダムな色を返す関数
function randomColor() {
var hue = Math.floor(Math.random() * 360);
return 'hsl(' + hue + ', 70%, 50%)';
}
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 頭部を描画
ctx.fillStyle = randomColor();
ctx.beginPath();
ctx.arc(150, 100, 80, 0, 2 * Math.PI);
ctx.fill();
// 目を描画
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(120, 80, 20, 0, 2 * Math.PI);
ctx.arc(180, 80, 20, 0, 2 * Math.PI);
ctx.fill();
ctx.fillStyle = randomColor();
ctx.beginPath();
ctx.arc(120, 80, 10, 0, 2 * Math.PI);
ctx.arc(180, 80, 10, 0, 2 * Math.PI);
ctx.fill();
// 鼻を描画
ctx.fillStyle = 'black';
ctx.beginPath();
ctx.arc(150, 120, 15, 0, 2 * Math.PI);
ctx.fill();
// 口を描画
ctx.fillStyle = randomColor();
ctx.beginPath();
ctx.moveTo(110, 150);
ctx.quadraticCurveTo(150, 170, 190, 150);
ctx.quadraticCurveTo(150, 180, 110, 150);
ctx.fill();
// 腕を描画
ctx.fillStyle = randomColor();
ctx.fillRect(50, 150, 50, 100);
ctx.fillRect(200, 150, 50, 100);
// 足を描画
ctx.fillStyle = randomColor();
ctx.fillRect(100, 220, 50, 80);
ctx.fillRect(150, 220, 50, 80);
// キャラクタ保存
function saveCharacter() {
var dataUrl = canvas.toDataURL('image/png');
var link = document.createElement('a');
link.href = dataUrl;
link.download = 'my_disney_character.png';
link.click();
}
</script>
</body>
</html>
```
ジョークとしては、キャラクタ作成後に「名前をつけて保存しよう!例: ミッキー、ドナルド、バズぺけとら など」といったメッセージを表示すると面白いかもしれません。