用Canvas轻松实现春节聚餐抽签小助手欢乐聚会必备神器

2023-12-25 08:31:39

春节聚餐是亲朋好友欢聚一堂的时刻，少不了要选出幸运者买单。传统的石头剪刀布未免太low了，不如用Canvas制作一个抽签小助手，让春节聚会更添欢乐。

这款抽签小助手采用HTML5、CSS和JavaScript精心打造，操作简单，趣味十足。只需轻轻一点，即可随机抽取幸运号码，让聚会气氛瞬间嗨起来。

制作步骤：

创建一个HTML文件，并添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <script src="script.js"></script>
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>
  <button onclick="draw()">抽签</button>
</body>
</html>

创建一个JavaScript文件，并添加以下代码：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var colors = ['#FF0000', '#FF7F00', '#FFFF00', '#00FF00', '#0000FF', '#4B0082', '#8B00FF'];
var names = ['张三', '李四', '王五', '赵六', '孙七', '周八', '吴九'];

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制圆圈
  for (var i = 0; i < names.length; i++) {
    var x = Math.random() * (canvas.width - 100) + 50;
    var y = Math.random() * (canvas.height - 100) + 50;
    var r = 50;
    ctx.beginPath();
    ctx.arc(x, y, r, 0, 2 * Math.PI);
    ctx.fillStyle = colors[i];
    ctx.fill();

    // 绘制文字
    ctx.font = '20px Arial';
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.fillText(names[i], x, y + 10);
  }

  // 绘制指针
  var x = canvas.width / 2;
  var y = canvas.height / 2;
  var r = 100;
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x + r * Math.cos(Math.PI / 6), y + r * Math.sin(Math.PI / 6));
  ctx.lineTo(x + r * Math.cos(11 * Math.PI / 6), y + r * Math.sin(11 * Math.PI / 6));
  ctx.closePath();
  ctx.fillStyle = 'black';
  ctx.fill();
}