Question

我有不同尺寸的图像，我试图将它们用作画布上的背景。

的index.html ：

<!DOCTYPE html>
<html>
<head>
  <title>js</title>
</head>
<body onLoad='init2()'>
  <canvas id="canvas" width="1000" height="1000">
    This text is displayed if your browser does not support HTML5 Canvas.
   </canvas>

<!-- This image will be displayed on the canvas -->   
<img id="myImage" src="https://image.slidesharecdn.com/bareconf-140329111624-phpapp02/95/draft-scientific-paper-1-638.jpg?cb=1396091812" style = "display: none">
</body>
</html>

如何将所有图像调整为我修复的画布大小？这是完整的code。

当我更改为此image时，它不会调整到我的画布尺寸。

哪个更好，调整我的所有图像或画布？

Answer 1

您可以使用drawImage的 4rth 和 5th 参数来定义源图像的目标宽度和高度。

您可以使用：

void ctx.drawImage（image，dx，dy，dWidth，dHeight）;

如果您将0 {0（正如您已在示例代码中提供）dx, dy以及dWidth和dHeight提供给画布宽度和高度，则源图像将延伸至整个画布。

如果您的源图像具有不同的宽高比并且在整个画布后面拉伸它会干扰它，您可以使用以下版本：

void ctx.drawImage（image，sx，sy，sWidth，sHeight，dx，dy，dWidth，做切片）;

sx, sy是源图片的开始 x ，开始 y 坐标（隐含在先前版本中的0,0）和{{1你想要在画布上挑选和放置源图像的宽度和高度。

因此，使用start x，开始y和源图像的宽度和高度，您可以巧妙地选择源图像的分区，这样当它在整个画布上拉伸时，宽高比不应该变形。

MDN Reference

如何调整图像大小以适合我的画布？

1 个答案: