canva画图 图片居中裁剪_canvas drawImage设置图片居中，拖动，缩放

Document

html,body,#app {

width:100%;

height:100%;

border:0;

margin:0;

padding:0;

}

#canvas{

width:100%;

height:100%;

}

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