JavaScript canvas 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

您需要明确指定 canvas 的大小。然后就可以得到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

JavaScript canvas drawImage 无法正常工作

JavaScript canvas drawImage not working properly

javascript

drawimage

html5-canvas