用canvas画一个斯诺克球桌
时间: 2023-05-16 18:07:18 浏览: 80
好的,以下是用canvas画一个斯诺克球桌的代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas Snooker Table</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="snookerTable" width="800" height="400"></canvas>
<script>
var canvas = document.getElementById("snookerTable");
var ctx = canvas.getContext("2d");
// Draw table
ctx.fillStyle = "#006400";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw cushion
ctx.fillStyle = "#FFD700";
ctx.fillRect(50, 50, canvas.width - 100, canvas.height - 100);
// Draw pockets
ctx.fillStyle = "#000000";
ctx.beginPath();
ctx.arc(75, 75, 15, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(canvas.width - 75, 75, 15, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(75, canvas.height - 75, 15, 0, Math.PI * 2);
ctx.fill();
ctx.beginPath();
ctx.arc(canvas.width - 75, canvas.height - 75, 15, 0, Math.PI * 2);
ctx.fill();
// Draw D
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(canvas.width / 2 - 50, canvas.height / 2 - 100, 100, 200);
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, 25, 0, Math.PI * 2);
ctx.fill();
</script>
</body>
</html>
```
这段代码会在一个800x400的canvas上画出一个斯诺克球桌,包括绿色的球桌布、黄色的球桌垫、四个黑色的球袋和中间的白色D字。