Canvas(十二) Canvas在画布中心缩放图像

发布日期: 2020-06-20

更新日期: 2020-06-19

文章字数: 206

阅读时长: 1 分

阅读次数:

缩放开始

<html>
  <head> </head>
  <body>
    <canvas
      id="canvas"
      style="display:block;margin:0 auto;border:1px solid #ccc"
      >您的浏览器不支持canvas</canvas
    >
    <input
      type="range"
      id="scale-range"
      min="0.5"
      max="3.0"
      step="0.01"
      value="1.0"
      style="display:block;margin:20px auto;width:800px;"
    />
  </body>
</html>
<script>
  window.onload = function () {
    var canvas = document.getElementById('canvas')
    canvas.width = 800
    canvas.height = 800
    var context = canvas.getContext('2d')
    var slider = document.getElementById('scale-range')
    var scale = slider.value
    var img = new Image()
    img.src = 'xxx.jpg' //注意路径
    img.onload = function () {
      //context.drawImage(img, 0, 0, canvas.width, canvas.height)
      drawImageByScale(scale)
      slider.onmousemove = function () {
        scale = slider.value
        drawImageByScale(scale)
      }
    }
  }
  function drawImageByScale(scale) {
    var imageWidth = 1152 * scale
    var imageHeight = 768 * scale
    // var sx = imageWidth / 2 - canvas.width / 2
    // var sy = imageHeight / 2 - canvas.height / 2
    // context.drawImage(
    //   img,
    //   sx,
    //   sy,
    //   canvas.width,
    //   canvas.height,
    //   0,
    //   0,
    //   canvas.width,
    //   canvas.height
    // )
    var dx = canvas.width / 2 - imageWidth / 2
    var dy = canvas.height / 2 - imageHeight / 2
    context.clearRect(0, 0, canvas.width, canvas.height) //清空
    context.drawImage(img, dx, dy, imageWidth, imageHeight)
  }
</script>