Question

以下是我目前使用的代码。通过0旋转，可以正确缩放图像以填充画布。（类似于background-size: cover，除了在Canvas上使用JavaScript）

我正在尝试添加旋转功能，具有以下功能。

旋转时保持图像居中。我尝试在width / 2中使用translate，然后在drawImage中使用相反的内容，但正如您所看到的那样，图片并未保持居中。我不确定这是否与我之前的x和y居中代码发生冲突，或者此处是否需要使用三角函数？
自动缩放图像以覆盖画布。这些是任意旋转，而不是90度增量。我不想裁剪任何超出画布角落所需的图像。这比我以前处理的三角学要复杂得多。

我认为这可以通过Math.sin和Math.cos完成，但是自从我使用它们以来已经很长时间了。我特别不确定如何实现＃2。任何帮助，将不胜感激。

var canvas = document.querySelector('canvas')
var context = canvas.getContext('2d')
var image = new Image()
image.src = 'http://i.stack.imgur.com/7FsbT.jpg'

image.onload = function () {
  
  var maxScaleX = canvas.width / image.width
  var maxScaleY = canvas.height / image.height
  scale = maxScaleX > maxScaleY ? maxScaleX : maxScaleY
  
  var width = image.width * scale
  var height = image.height * scale
  var x = (width - canvas.width) / -2
  var y = (height - canvas.height) / -2
  
  var degrees = 30
  
  context.setTransform(1, 0, 0, 1, 0, 0) // reset previous translate and/or rotate
  context.translate(width / 2, height / 2)
  context.rotate(degrees * Math.PI / 180)
  
  context.drawImage(image, x - width / 2, y - height / 2, width, height)

}

<canvas width="350" height="150" style="border: solid 1px black"></canvas>

Answer 1

+1 to Blindman67's answer为此工作。

我缩短了代码并简化了我的用例。您应该只需将function drawBestFit()包含到您的应用中，并使用它来填充任何已加载图像的画布。

为了更好地了解其工作原理，请查看Blindman67's original answer - 尤其是底部的演示代码段。

var canvas = document.querySelector('canvas')
var context = canvas.getContext('2d')
var image = new Image()
image.src = 'http://i.stack.imgur.com/7FsbT.jpg'

image.onload = function() {

  var degrees = 0

  loop()

  function loop() {
    degrees += .5
    drawBestFit(context, degrees * Math.PI / 180, image)
    requestAnimationFrame(loop)
  }

  function drawBestFit(ctx, angle, image) {
    
    var dist = Math.sqrt(Math.pow(canvas.width, 2) + Math.pow(canvas.height, 2))
    var diagAngle = Math.asin(canvas.height / dist)

    var a1 = ((angle % (Math.PI * 2)) + Math.PI * 4) % (Math.PI * 2)
    if (a1 > Math.PI)
      a1 -= Math.PI
    if (a1 > Math.PI / 2 && a1 <= Math.PI)
      a1 = (Math.PI / 2) - (a1 - (Math.PI / 2))
    
    var ang1 = Math.PI / 2 - diagAngle - Math.abs(a1)
    var ang2 = Math.abs(diagAngle - Math.abs(a1))
    
    var scale1 = Math.cos(ang1) * dist / image.height
    var scale2 = Math.cos(ang2) * dist / image.width
    
    var scale = Math.max(scale1, scale2)
    
    var dx = Math.cos(angle) * scale
    var dy = Math.sin(angle) * scale
    ctx.setTransform(dx, dy, -dy, dx, canvas.width / 2, canvas.height / 2)
    
    ctx.drawImage(image, -image.width / 2, -image.height / 2, image.width, image.height)
    
    ctx.setTransform(1, 0, 0, 1, 0, 0) // reset transformations when done

  }

}

<canvas width="350" height="200" style="border: solid 1px black"></canvas>

缩放旋转图像以使用JavaScript三角函数填充HTML5 Canvas？

1 个答案: