用canvas 代码生成 360度看车内饰，不使用three.js

可以使用 HTML5 的 canvas 元素来实现 360 度看车内饰的效果。实现的思路是将车内饰的多张图片拼接在一起，并通过鼠标或手指的拖动来改变图片的显示位置，从而实现 360 度旋转的效果。

以下是一个简单的示例代码：

HTML 部分：

<canvas id="canvas" width="800" height="600"></canvas>

JavaScript 部分：

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

var imgCount = 36; // 图片数量
var imgWidth = 800; // 单张图片宽度
var imgHeight = 600; // 单张图片高度
var currentImgIndex = 0; // 当前显示的图片索引
var isDragging = false; // 是否正在拖拽

var images = []; // 存放所有图片的数组

// 加载所有图片
for (var i = 0; i < imgCount; i++) {
  var img = new Image();
  img.src = "car-interior-" + i + ".jpg"; // 图片路径
  images.push(img);
}

// 绘制当前显示的图片
function drawImage() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(images[currentImgIndex], 0, 0, imgWidth, imgHeight);
}

drawImage();

// 鼠标或手指按下事件
canvas.addEventListener("mousedown", function (e) {
  isDragging = true;
});

canvas.addEventListener("touchstart", function (e) {
  isDragging = true;
});

// 鼠标或手指移动事件
canvas.addEventListener("mousemove", function (e) {
  if (isDragging) {
    var delta = e.movementX || e.webkitMovementX || e.mozMovementX || 0;
    currentImgIndex = (currentImgIndex - delta / 10 + imgCount) % imgCount;
    drawImage();
  }
});

canvas.addEventListener("touchmove", function (e) {
  if (isDragging) {
    var delta = e.touches[0].clientX - e.touches[0].target.getBoundingClientRect().left;
    currentImgIndex = (currentImgIndex - delta / 10 + imgCount) % imgCount;
    drawImage();
  }
});

// 鼠标或手指释放事件
canvas.addEventListener("mouseup", function (e) {
  isDragging = false;
});

canvas.addEventListener("touchend", function (e) {
  isDragging = false;
});

在这段代码中，首先定义了一些变量，包括图片数量、单张图片宽高、当前显示的图片索引等。然后通过一个 for 循环加载所有的图片，并将其存放在一个数组中。

接下来定义了一个 drawImage 函数，用于绘制当前显示的图片。该函数首先使用 clearRect 方法清除画布上的内容，然后使用 drawImage 方法绘制当前显示的图片。

在鼠标或手指按下事件中，将 isDragging 设置为 true，表示正在拖拽。

在鼠标或手指移动事件中，如果 isDragging 为 true，则根据鼠标或手指移动的距离计算出当前应该显示的图片索引，并调用 drawImage 函数重新绘制画布。

最后在鼠标或手指释放事件中，将 isDragging 设置为 false，表示拖拽结束。

通过这段代码，就可以实现一个简单的利用 canvas 实现的 360 度看车内饰效果。