如何实现Canvas的增量旋转（角度范围-180°至180°）

核心思路 #

Canvas默认以左上角为原点，0度指向右侧，且旋转顺时针为正。要实现箭头朝上为0度的规则，需要三步调整：

1. 将画布原点移到中心，让旋转围绕视觉中心进行；
2. 把目标角度转换为Canvas坐标系的角度（减去90度，相当于把默认朝右的0度转成朝上）；
3. 对角度做归一化处理，确保始终落在-180°到180°区间内。

JavaScript 实现方案 #

1. 角度归一化工具函数

先写一个函数，把任意角度限制在-180°~180°之间：

function normalizeAngle(angle) {
  angle = angle % 360;
  if (angle > 180) {
    angle -= 360;
  } else if (angle < -180) {
    angle += 360;
  }
  return angle;
}

2. 核心绘制逻辑

假设你有一个id为myCanvas的画布，完整绘制代码如下：

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

function draw(angle) {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 保存当前上下文状态（避免影响后续绘制）
  ctx.save();
  
  // 将原点移到画布中心
  ctx.translate(canvas.width / 2, canvas.height / 2);
  
  // 转换角度：Canvas默认0度朝右，转成朝上为0度需要减90度，再归一化
  const canvasRotation = normalizeAngle(angle - 90);
  // 转成弧度（Canvas旋转只接受弧度）
  ctx.rotate((canvasRotation * Math.PI) / 180);
  
  // 绘制箭头（替换成你自己的图形即可）
  ctx.beginPath();
  ctx.moveTo(0, -50); // 箭头朝上的顶点
  ctx.lineTo(-20, 20);
  ctx.lineTo(-10, 20);
  ctx.lineTo(-10, 50);
  ctx.lineTo(10, 50);
  ctx.lineTo(10, 20);
  ctx.lineTo(20, 20);
  ctx.closePath();
  ctx.fillStyle = '#000';
  ctx.fill();
  
  // 恢复上下文状态
  ctx.restore();
}

3. 调用示例

// 测试不同角度
draw(0);      // 箭头朝上（默认0度）
draw(90);     // 箭头朝右
draw(-90);    // 箭头朝左
draw(180);    // 箭头朝下
draw(200);    // 自动归一为-160度，箭头朝左下方
draw(-200);   // 自动归一为160度，箭头朝右下方

Angular 适配参考 #

在Angular中，你可以通过ViewChild获取画布元素，把逻辑封装到组件里：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({
  selector: 'app-canvas-rotate',
  template: '<canvas #myCanvas width="400" height="400"></canvas>'
})
export class CanvasRotateComponent implements AfterViewInit {
  @ViewChild('myCanvas') canvasRef!: ElementRef<HTMLCanvasElement>;
  ctx!: CanvasRenderingContext2D;

  ngAfterViewInit(): void {
    const canvas = this.canvasRef.nativeElement;
    this.ctx = canvas.getContext('2d')!;
    this.draw(0); // 初始绘制0度（朝上）
  }

  normalizeAngle(angle: number): number {
    angle = angle % 360;
    if (angle > 180) {
      angle -= 360;
    } else if (angle < -180) {
      angle += 360;
    }
    return angle;
  }

  draw(angle: number): void {
    const canvas = this.canvasRef.nativeElement;
    this.ctx.clearRect(0, 0, canvas.width, canvas.height);
    this.ctx.save();
    this.ctx.translate(canvas.width / 2, canvas.height / 2);
    
    const canvasRotation = this.normalizeAngle(angle - 90);
    this.ctx.rotate((canvasRotation * Math.PI) / 180);
    
    // 替换成你的自定义图形绘制代码
    this.ctx.beginPath();
    this.ctx.moveTo(0, -50);
    this.ctx.lineTo(-20, 20);
    this.ctx.lineTo(-10, 20);
    this.ctx.lineTo(-10, 50);
    this.ctx.lineTo(10, 50);
    this.ctx.lineTo(10, 20);
    this.ctx.lineTo(20, 20);
    this.ctx.closePath();
    this.ctx.fillStyle = '#000';
    this.ctx.fill();
    
    this.ctx.restore();
  }
}

内容的提问来源于stack exchange，提问作者greJuva