ChatGPT 4o with canvas ベータ版を使って、fabric.js による多角形の描画を作成してみます。
概要
ちょっとさわった感じだと ChatGPT 4o with canvas ベータ版は、ChatGPT 4o よりもコード作成がしやすく、コードの変更内容もわかりやすい。
fabric.js による多角形の描画するコードを作成してみました。
作成した「Fabric.js Polygon Drawer」
-
初期バージョン
-
いくつか変更したバージョン
ChatGPT 4o with canvas の画面
指定に応じて、コードが右側に表示されます。
かなりラフな指示でもコードを作成してくれました。
コードの変更内容
コードの変更箇所を表示できます。
作成したコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fabric.js Polygon Drawer</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.2.4/fabric.min.js"></script>
<style>
canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<h2>多角形を描く (3〜100角形)</h2>
<label for="sides">角の数:</label>
<input type="number" id="sides" min="3" max="100" value="6">
<label for="bgColor">図形の背景色:</label>
<input type="color" id="bgColor" value="#ffa500">
<button onclick="drawPolygon()">描画</button>
<canvas id="canvas" width="600" height="400"></canvas>
<script>
const canvas = new fabric.Canvas('canvas');
function drawPolygon() {
const sides = parseInt(document.getElementById('sides').value);
if (sides < 3 || sides > 100) {
alert('角の数は3から100までです');
return;
}
const bgColor = document.getElementById('bgColor').value;
const radius = 100;
const centerX = canvas.getWidth() / 2;
const centerY = canvas.getHeight() / 2;
const points = [];
for (let i = 0; i < sides; i++) {
const angle = (i * 2 * Math.PI) / sides;
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);
points.push({ x, y });
}
const polygon = new fabric.Polygon(points, {
left: centerX - radius,
top: centerY - radius,
fill: bgColor,
stroke: 'blue',
strokeWidth: 2,
selectable: true
});
canvas.clear();
canvas.add(polygon);
}
</script>
</body>
</html>
感想
ベータ版ということですが、なかなか使いやすくいい感じです。
ChatGPT 4o だとコードの応答が遅く感じますが、かなり改善されていると思います。