Javascript 如何绘制与红色块相同的图像

图像上的红色块，大小为

50*50

，图像原点大小为

320*180

，图像元素大小为

200*113

现在我想得到红色方块并在画布上绘制，但我不知道如何计算，请让我知道

为什么

和

如何

这里是我的示例代码

window.onload=function（）{
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var img=document.getElementById（“尖叫”）；
常量自然宽度=img.naturalWidth；
常量自然高度=img.自然高度；
常数比=自然宽度/img.offsetWidth；
恒高比=自然高度/离地高度；
const canvasRatio=自然宽度/c.宽度；
const canvasYRatio=自然高度/c.高度；
日志（比率、高度比率、画布比率）；
常数r=1/（自然宽度/自然高度）；
控制台日志（r）；
常数宽度=50；
常数高度=50；
const top=50*高度比；
常数左=90*比率；
ctx.绘图图像（img，-左，-上）；
};
正文{
位置：相对位置；
}
您需要使用的长版本，以便能够裁剪原始图像并调整其大小

short 2 arguments版本只是以原始大小绘制原始图像，在目标上有一些偏移，但您也需要在输出上应用大小调整

所以使用长版本你可以做到

 ctx.drawImage(img,
 // source
   x * ratioW,
   y * ratioH,
   width * ratioW,
   height * ratioH,
 // destination
   0,
   0,
   width,
   height
 );


window.onload=function（）{
var c=document.getElementById（“myCanvas”）；
var ctx=c.getContext（“2d”）；
var img=document.getElementById（“尖叫”）；
常量自然宽度=img.naturalWidth；
常量自然高度=img.自然高度；
常数比=自然宽度/img.offsetWidth；
恒高比=自然高度/离地高度；
const canvasRatio=自然宽度/c.宽度；
const canvasYRatio=自然高度/c.高度；
常数r=1/（自然宽度/自然高度）；
控制台日志（r）；
常数宽度=50；
常数高度=50；
const top=50*高度比；
常数左=90*比率；
ctx.drawImage(
img，
左侧，顶部，宽度*比率，高度*高度比率，
0，0，宽度，高度
);
};
正文{
位置：相对位置；
}

我不是一名web开发人员，但红色边框的大小似乎是50*60。妈的，我的错误……只是一个调试提示。尝试用硬编码的值替换变量，并检查是否得到正确的结果。非常感谢，我使用了错误的函数，但是为什么画布数量如此糟糕，我如何修复它？