js代码实现canvas360度全景图

以下是一个基本的实现360度全景图的 JavaScript 代码：

// 获取 canvas 元素
const canvas = document.getElementById('panorama');
const context = canvas.getContext('2d');

// 加载图片
const image = new Image();
image.src = 'panorama.jpg';

// 绘制图片
image.onload = function() {
  context.drawImage(image, 0, 0);
};

// 添加事件监听器
let isDragging = false;
let previousX = 0;
canvas.addEventListener('mousedown', function(event) {
  isDragging = true;
  previousX = event.clientX;
});
canvas.addEventListener('mousemove', function(event) {
  if (isDragging) {
    const delta = event.clientX - previousX;
    previousX = event.clientX;
    // 将 delta 值映射为旋转角度，根据具体需求来实现
    // ...
    // 旋转画布
    context.translate(canvas.width / 2, canvas.height / 2);
    context.rotate(angle);
    context.translate(-canvas.width / 2, -canvas.height / 2);
    // 重新绘制图片
    context.drawImage(image, 0, 0);
  }
});
canvas.addEventListener('mouseup', function() {
  isDragging = false;
});

需要注意的是，上述代码中的旋转角度的计算可能会因为具体需求而有所不同，需要根据实际情况来修改。另外，为了避免图片出现锯齿等问题，建议在绘制图片时使用双缓存技术。