使用canvas绘制时钟表盘，要求绘制两个表盘，一个北京时间，一个伦敦时间，其中一个时间表盘使用旋转变换角度

在HTML5 Canvas上绘制时钟表盘，首先需要了解一些基本概念，如`arc()`函数用于画圆弧，`rotate()`函数用于旋转画布。为了同时绘制北京时间和伦敦时间，并通过旋转变换展示伦敦时间，你可以按照以下步骤操作：

1. **创建画布元素**:

   <canvas id="clockCanvas"></canvas>

2. **获取canvas上下文并设置尺寸**:
JavaScript中，可以这样获取canvas元素并初始化绘图环境：

   const canvas = document.getElementById('clockCanvas');
   const ctx = canvas.getContext('2d');
   canvas.width = window.innerWidth;
   canvas.height = window.innerHeight * 0.75;

3. **绘制表盘背景**:
创建一个圆形作为表盘基础，然后填充颜色：

   ctx.beginPath();
   ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2 - 20, 0, Math.PI * 2);
   ctx.fillStyle = '#f8f9fa';
   ctx.fill();

4. **绘制数字和指针**:
你可以定义一个函数来绘制数字，使用`arc()`和`fillText()`分别绘制表盘刻度和小时、分钟和秒钟的数字。

5. **定时器更新时间并绘制旋转表盘**:
对于北京和伦敦时间的切换，你可以使用`setInterval`定时器。对于伦敦时间，每次更新时使用`rotate()`旋转画布，例如每60度对应一个小时。示例：

   function updateClock() {
     // 更新当前时间和表盘角度
     let angle = (new Date().getHours() % 12) * (Math.PI / 6); // 伦敦时间为12小时制
     ctx.clearRect(0, 0, canvas.width, canvas.height);

     // 绘制北京时间和伦敦时间
     drawTime('Beijing', new Date());
     if (isLondonTime()) { // 判断是否显示伦敦时间
       ctx.translate(canvas.width / 2, canvas.height / 2);
       ctx.rotate(angle);
       drawTime('London', new Date(LondonTimeZoneOffset));
       ctx.restore(); // 恢复原画布状态
     }
     
     requestAnimationFrame(updateClock); // 动态更新
   }

   // 其他辅助方法，如drawTime()、isLondonTime()等