画布图像的大小与画布或原始图像的大小不同 [英] Canvas image is not the same size as the canvas or orginal image
问题描述
我已将画布放在背景图片上方。当我按下尝试按钮时，图像会显示在画布中，但显示的尺寸与父图像大小不同或无法容纳在画布中。我只看到图像的左上角。
I've put a canvas on top a background image. When I press the 'Try It' button the image appears in the canvas but it does not appear the same size as the parent or fit in the canvas. I only see the top left of the image.
父图像和画布的大小相同。
The parent image and the canvas are the same size.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="bg">
<img src="Assets/Images/background.png" alt="background">
</div>
<section class="content">
<p>Image to use:</p>
<img id="taxi" src="Assets/Images/PV.png" width="250" height="300">
<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<p><button onclick="myCanvas()">Try it</button></p>
</section>
</body>
</html>
JS
function myCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("taxi");
ctx.drawImage(img,10,10);
}
如何获取以使画布中的图像大小相同作为父母？
另外，当我第二次按 Try It时，如何使图像从画布上消失？
How do I get it so that the image in the canvas is the same size as the parent? Also, how do I get the image to disappear from the canvas when I press 'Try It' on the second press?
推荐答案
我遇到了同样的问题，不得不学习艰难的方法。响应式画布和纵横比相同的画布并不像人们希望的那么容易。
I had the same issue and had to learn the hard way. Responsive Canvas and same same aspect Ratio Canvas is not as easy as one would hope.
您需要做的事情：
function myCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("taxi");
ctx.drawImage(img,10,10, 250, 300);
}
让我解释一下原因。
在您的HTML中，您已手动声明：
In your HTML, you have manually declared:
width="250" height="300"
因此投影在画布上的图像必须具有相同的大小。全部由ctx.drawImage（img，10,10，250，300）函数控制。
So the image projected on the Canvas needs to be the same size. It is all controlled by the ctx.drawImage(img,10,10, 250, 300) function.
fn的第一个参数是引用数据，这可以是视频，图像等。
The first argument to the fn is the referenced data, this can be a video, image etc.
第二个参数是X轴偏移，第三个参数是Y axys偏移（如果不希望偏移，只需传递：ctx .drawImage（img，0,0，250，300）;。
The second arguments is the X axis offset, the third argument is the Y axys offset(If you want no offset, just pass : ctx.drawImage(img,0,0, 250, 300);.
在这种情况下，第4和第5个参数是作为第一个参数传递的参数的大小。
In this case, the 4th and 5th arguments are the size of the what was passed as first argument.
这是一个Codepen，尝试更改参数并查看会发生什么。
Here is a codepen, try changing the arguments and see what happens.
https://codepen.io/pen/?editors=1010
PS，您可以向该方法传递更多参数，但是通常，这就是您所需要的。
PS, you can pass many many more arguments to this method, but usually, this is all you need.
只需添加，就可以增加较小的图像以适合Canvas，反之亦然，但是如果您使用HTML属性声明Canvas的大小，并在dr中使用较小的数字awImage fn，它将不会填充画布。 HTML似乎更具规范性。这可能是好事或坏事，但重要的是要知道。
Just wanted to add, you can increase a smaller image to fit a Canvas, and the other way around, but if you declare the size of the Canvas with HTML attributes, and use smaller numbers in the drawImage fn, it will not fill the canvas. The HTML seems to have more specifity. This can be good or bad, but it is important to know.
这篇关于画布图像的大小与画布或原始图像的大小不同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
