代码之家 › 专栏 › 技术社区 › Joni dep

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

drawimage html5-canvas javascript

-2

Joni dep · 技术社区 · 6 年前

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

这是我的密码

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>

正如你所看到的,它与正方形不成比例,尽管我设置了正方形的全尺寸。

另一个问题,正如您所看到的,您必须运行此代码两次才能看到图像,这是为什么?

1 回复 | 直到 6 年前

Pogrindis 6 年前

您需要明确指定画布的大小。然后可以获得2d上下文:

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

推荐文章

YotiPoti · 我的照片太大了,无法容纳我的HTML画布。我该怎么办?

1 年前

Mykyta_GloryToUkraine · JS drawImage作为类中的方法

2 年前

TheTechy · 从多维数组为HTML5平铺图生成冲突对象

6 年前

Joni dep · JavaScript画布drawImage工作不正常[重复]

6 年前

DaFudgeWizzad · 如果形状超出了javascript画布的范围,如何剪切形状?

6 年前

Bestlogo56 · 我随机生成的平铺集未按预期工作。我怎样才能解决这个问题?

6 年前

John Ackerman · 绘制点的路径html画布

6 年前

Jaan · Fabricjs对象在完成时移动火

6 年前

Tareq Jami · 使用鼠标(坐标系)放大我的canva

6 年前

PiggMiner · 为什么我的代码不能将所有内容都绘制到画布上?

6 年前