使用css设置画布高度/宽度100％时图像变形

Question

我目前正在尝试将图像绘制到画布上，到目前为止我有这个：

"use strict";

var debugging = true;
var canvas = document.getElementById('astoniaCanvas');
var ctx = canvas.getContext('2d');

function loadUI() {
   var topOverlay = new Image();
   topOverlay.src = "/images/00000999.png";
   topOverlay.onload = function() {
       ctx.drawImage(topOverlay, 0, 0, canvas.width, 10);
   }

   var bottomOverlay = new Image();
   bottomOverlay.src = "/images/00000998.png";

   if (debugging) {
    console.log('Drawing');
   }
}


loadUI();

工作正常，但图片加载并看起来像这样：

什么时候看起来像这样：

美观图片的尺寸为800x40。

如果我删除

canvas {
    width: 100%;
    height: 100%;
}

图像恢复正常，我如何缩放画布？

任何信息都会非常感谢。

Answer 1

你不考虑身高。对于高度/宽度与clientHeight / clientWidth

相比，Canvas可能会令人困惑

创建画布时，css的宽度和高度与内部画布所包含的像素数无关。除非特别设置，否则画布的宽度高度为300x150。

我过去使用的一个技巧是使用clientWidth和缩放来设置所有内容

"use strict";

var debugging = true;
var canvas = document.getElementById('astoniaCanvas');
var ctx = canvas.getContext('2d');

function loadUI() {
  var topOverlay = new Image();
  topOverlay.onload = function() {
   // use a scale between the image width and the canvas clientWidth  
    var scale = topOverlay.width / canvas.clientWidth;
    var newWidth = canvas.clientWidth;
    var newHeight = topOverlay.height * scale;
    // resize canvas based on clientWidth
    canvas.width = newWidth;
    canvas.height = newHeight;
    ctx.drawImage(topOverlay, 0, 0, newWidth, newHeight);
  }
  topOverlay.src = "http://i.stack.imgur.com/AJnjh.png";

  //  var bottomOverlay = new Image();
  //  bottomOverlay.src = "/images/00000998.png";

  if (debugging) {
    console.log('Drawing');
  }
}

loadUI()

<canvas id="astoniaCanvas" style="width: 100%"></canvas>