canvas的背景图自适应画布

要实现canvas的背景图自适应画布，可以按照以下步骤进行：

1. 获取canvas元素的宽度和高度。

2. 创建一个Image对象，并将背景图片的路径赋值给它。

3. 监听Image对象的load事件，在事件处理函数中将背景图片绘制到canvas中。

4. 在绘制背景图片之前，可以使用canvas的clearRect()方法清空画布。

5. 在绘制背景图片时，可以使用canvas的drawImage()方法，将背景图片绘制到canvas中，并设置绘制的位置和大小。

6. 在设置绘制位置和大小时，可以根据canvas的宽度和高度，计算出背景图片应该绘制的位置和大小，从而实现背景图片自适应画布。

示例代码如下：

// 获取canvas元素
var canvas = document.getElementById('myCanvas');
// 获取canvas的上下文
var ctx = canvas.getContext('2d');

// 获取canvas的宽度和高度
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;

// 创建一个Image对象
var bgImg = new Image();
// 设置背景图片的路径
bgImg.src = 'bg.png';

// 监听Image对象的load事件
bgImg.onload = function() {
  // 在绘制背景图片之前清空画布
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  // 计算背景图片的绘制位置和大小
  var bgImgX = 0;
  var bgImgY = 0;
  var bgImgWidth = canvasWidth;
  var bgImgHeight = canvasHeight;
  // 将背景图片绘制到canvas中
  ctx.drawImage(bgImg, bgImgX, bgImgY, bgImgWidth, bgImgHeight);
};

在实际使用中，可以根据具体情况进行调整，以达到最佳效果。