JavaScript画布drawImage无法正常工作[重复]

Question

我正在尝试绘制图像的一部分，但它无法正常工作。 当我尝试使用它时，宽度和高度与原来的不一样。

这是我的代码

window.onload = function() {
ImageObjSketch = new Image(); // URL
ImageObjSketch.src = 'https://i.imgur.com/75lATF9.png';

canvasClone = document.getElementById("squareTarget");
ctxClone = canvasClone.getContext("2d");
ctxClone.drawImage(ImageObjSketch,34,119,16,16,0,0,38,38);
}

#squareTarget {
	width: 38px; height: 38px;
	position: relative;
	right: 0px;
	display: inline-block;
	border: 1px #000000 solid;
}

<canvas id="squareTarget"></canvas>

正如你所见，它与正方形不成比例，尽管我设置了正方形的完整大小。

另一个问题，如您所见，您必须运行此代码两次才能看到图像，这是为什么呢？

Answer 1

您需要明确指定画布的大小。 然后就可以得到 2d Context：

window.onload = function() {
var ImageObjSketch = new Image(); // URL
ImageObjSketch.src = 'https://i.imgur.com/75lATF9.png';

var canvasClone = document.getElementById("squareTarget");
  canvasClone.width = 38;
  canvasClone.height = 38;
  ctxClone = canvasClone.getContext("2d");


ctxClone.drawImage(ImageObjSketch, 34,119,16,16,0,0,38,38);
}

然后你的尺寸是 38，但你应该使用文档的高度和宽度，但这是一个重构。

类似：

ctxClone.drawImage(ImageObjSketch, 34,119,16,16,0,0,canvasClone.width,canvasClone.height);

https://codepen.io/anon/pen/KoYbzm