使用 Canvas 调整叠加图像的大小问题

Question

我有一个音频波形，一页有两张图片，一张是白层，一张是红层。白色层是调整后的大小，但是当歌曲播放时我无法将红色层调整到正确的大小。我不知道为什么。

这是我正在使用的一些代码，还有一个 fiddle

var imgBg = new Image(),
    imgFg = new Image(),
    count = 2;
imgBg.onload = imgFg.onload = init;
imgBg.src = "http://i.imgur.com/hRHH9VO.png";
imgFg.src = "http://i.imgur.com/WoJggN0.png";

function init() {
  if (--count) return;   // makes sure both images are loaded

   var canvas = document.querySelector("canvas"),
       ctx = canvas.getContext("2d"),
       audio =  document.querySelector("audio");

  canvas.width = 750;
  canvas.height = 120;

  render();

  audio.volume = 0.5;
  audio.addEventListener("timeupdate", render);

  function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(imgBg, 0, 0, canvas.width, canvas.height);

    // calc progress
    var pst = audio.currentTime / audio.duration;

    // draw clipped version of top image
    if (pst > 0) {
      ctx.drawImage(imgFg, 0, 0, (canvas.width * pst)|0, canvas.height,  // source
                           0, 0, (canvas.width * pst)|0, canvas.height); // dst
    }
  }
}

https://jsfiddle.net/tallgirltaadaa/pxezgj99/

Answer 1

只需更改 drawImage() 中的 source 大小即可将图像大小用作源：

ctx.drawImage(imgFg, 0, 0, imgFg.width * pst, imgFg.height,     // src
                     0, 0, canvas.width * pst, canvas.height);  // dst

由于此处的图像比目标大canvas，您必须使用源大小作为基础，然后将其全部缩小到目标。

Modified fiddle

使用 Canvas 调整叠加图像的大小问题

Issues sizing overlaying image with Canvas

javascript

html

canvas

html5-canvas

html5-audio