canvas drawImage设置图片居中，拖动，缩放

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,body,#app {
      width:100%;
      height:100%;
      border:0;
      margin:0;
      padding:0;
    }
    #canvas{
      width:100%;
      height:100%;
    }
  </style>
</head>

<body>
  <div id="app">
    <canvas id="canvas"></canvas>
  </div>
  <script>
    var canvas, context;
var imageWidth, imageHeight;
var img,
  imgX = 0,
  imgY = 0,
  imgScale = 1;
function loadImg() {
  img = new Image();
  img.onload = function () {
    imgX = (canvas.width - img.width) / 2;
    imgY = (canvas.height - img.height) / 2
    drawImage();
  }
  img.src = 'http://127.0.0.1:56398/%E4%B8%89%E5%93%A5%E5%B0%8F%E8%88%9E.jpeg';
}
function drawImage() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(
    img, //规定要使用的图像、画布或视频。
    0, 0, //开始剪切的 x 坐标位置。
    img.width, img.height,  //被剪切图像的高度。
    imgX, imgY,//在画布上放置图像的 x 、y坐标位置。
    img.width * imgScale, img.height * imgScale  //要使用的图像的宽度、高度
  );
  canvasEventsInit()
}
function canvasEventsInit() {
  canvas.onmousedown = function (event) {
    var pos = windowToCanvas(event.clientX, event.clientY);

    canvas.onmousemove = function (evt) {
      canvas.style.cursor = 'move';
      var posl = windowToCanvas(evt.clientX, evt.clientY);
      var x = posl.x - pos.x;
      var y = posl.y - pos.y;
      pos = posl;
      imgX += x;
      imgY += y;
      drawImage();
    };
    canvas.onmouseup = function () {
      canvas.onmousemove = null;
      canvas.onmouseup = null;
      canvas.style.cursor = 'default';
    };
    document.onmouseup = function() {
      canvas.onmousemove = null;
      canvas.onmouseup = null;
      canvas.style.cursor = 'default';
      document.onmouseup = null;
    }
  };

  canvas.onmousewheel = canvas.onwheel = function (event) {
    var pos = windowToCanvas(event.clientX, event.clientY);
    var n = 1.1;
    var n2 = (1/1.1).toFixed(2);
    event.wheelDelta = event.wheelDelta ? event.wheelDelta : (event.deltalY * (-40));
    if (event.wheelDelta > 0) {
      imgScale *= n;
      imgX = imgX * n - pos.x * (n-1);
      imgY = imgY * n - pos.y * (n-1);
    } else {

      imgScale *= n2;
      imgX = imgX *n2+ pos.x *(1-n2);
      imgY = imgY *n2 + pos.y *(1-n2);
    }
    drawImage();
  };
}


/*坐标转换*/
function windowToCanvas(x, y) {
  var box = canvas.getBoundingClientRect();
  return {
    x: x - box.left - (box.width - canvas.width) / 2,
    y: y - box.top - (box.height - canvas.height) / 2
  };
}
(function int() {
  canvas = document.getElementById('canvas');
  canvas.width = canvas.getBoundingClientRect().width;
  canvas.height = canvas.getBoundingClientRect().height;
  context = canvas.getContext('2d');
  loadImg();

})();
      
  </script>
</body>

</html>

canvas drawImage设置图片居中，拖动，缩放

此生无悔

引用和评论

Vue.js-Vue实例

2025年最新反编译微信小程序的教程及工具

手写一个动态海洋和天空效果的vue hooks

你可能不知道的图片加载相关知识

原生JS大揭秘—JS代码执行原理解刨

原生electron起步-从零到一完成构建和打包

LRU算法，你别跑，我就要吃透你