Javascript Canvas lineTo（）在错误的位置绘制y坐标

我正在尝试使用ctx.lineTo（）在画布上绘制一些矩形。它们被画出来了，但y坐标永远不对。矩形变得太高，并且位于y轴上的错误位置。当我逐步使用调试器时，它会显示lineTo（）方法中的y坐标是正确的，但我制作了一个canvas.click事件来警告坐标（当我在左上角单击时，坐标是正确的，它会警告（0,0））。单击事件显示y坐标实际上不是它声明将在lineTo（）方法中绘制的位置。但是，x坐标始终是正确的。需要考虑的一件事是，我通过使用javascript将html附加到一个元素来创建画布，并向其中添加一个我绘制的图像。我重新缩放矩形的坐标，以便它们适当地放置在画布上，画布被缩放到适合设备大小的图像大小。以下是我从画布创建到使用lineTo（）方法的所有代码

画布是在该方法的早期阶段（在appendPicture（）中）创建的：

画布的宽度和高度与CSS的宽度和高度不同！ 这意味着画布将被拉伸以与CSS大小对齐。这有利于缩放，但可能会导致像宽度：100%这样的问题

---

两种解决方案（取决于您的需要）：

• 读取画布的DOM元素大小并将其应用于画布本身（请参见下面示例中的第4个画布）
• 根据画布的实际大小修改其CSS样式（请参见下面的第5个画布）

---

简单的例子：

函数构建画布（w、h、sizeFromDOM、changeCSS、looksFine）{
var canvas=document.createElement（'canvas'）；
var ctx=canvas.getContext（'2d'）；
document.body.appendChild（画布）；
canvas.style.borderColor=looksFine？“绿色”：“红色”；
if（sizeFromDOM）{
//从DOM中读取其大小
canvas.width=canvas.offsetWidth；
canvas.height=canvas.offsetHeight；
}否则{
//或者简单地应用所给的
画布宽度=w；
canvas.height=h；
}
//如果需要，更改CSS样式
如果（更改CSS）{
canvas.style.width=canvas.width+'px'；
canvas.style.height=canvas.height+'px'；
}
//在每个平面上绘制相同的80x80正方形
ctx.strokeStyle=looksFine？“绿色”：“红色”；
ctx.beginPath（）；
ctx.moveTo（10,10）；
ctx.lineTo（90,10）；
ctx.lineTo（90,90）；
ctx.lineTo（10,90）；
ctx.lineTo（10,10）；
ctx.stroke（）；
}
buildCanvas（200200，false，false，true）；//这个画布很好，因为它与CSS大小匹配
buildCanvas（300200）；//这张帆布是水平拉伸的
buildCanvas（200300）；//这张画布是垂直拉伸的
buildCanvas（200300，真，假，真）；//我们来修这个
buildCanvas（300200，false，true，true）；//这一个也是，但通过更改其CSS

画布{
宽度：200px；
高度：200px；
边框：1px实心#aaa；
保证金：4倍；
}

这里有一个很好的小杂凑，它可以将所有

画布

元素的高度和宽度设置为与其CSS设置相等

var canvases = document.getElementsByTagName("canvas");
for(var i=0; i<canvases.length; i++)
{
  canvas = canvases[i];
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}

var canvases=document.getElementsByTagName（“canvas”）；
对于（var i=0；i请制作一个JSFIDLE。是的，我已经指定了不同的css大小。谢谢。您还知道解决方案吗？不客气。解决方案是获取画布DOM元素大小并将其应用于画布本身。例如：
canvas.width=canvas.offsetWidth
。用固定值更新了我的答案（第四个）画布。另一个解决方案是读取画布的大小并更改其CSS样式（取决于您的需要），例如：
canvas.style.width=canvas.width+'px'；
在我的示例中查看第五个画布。回答得很好。我在您的示例中使用了第五个画布的方式，效果很好。谢谢。
function appendPicture(list, theSection) {

        list.append('<div id="wrapper' + platform + '" style="width:100%; text-align:center">\
            <canvas class="assessmentImageSmall" style="width:100%;height:' + Math.round(theSection.thePicture.ySize * (document.getElementById('assessmentSectionForm' + platform).clientWidth / theSection.thePicture.xSize)) + 'px" id="assessmentImage' + platform + '" align="middle" ></canvas>\
            <!--<p style="color:#666;" id="imageInstruction">Tap image to enlarge.</p>-->\
            </div>');
        $("#wrapper").kendoTouch({
                                     tap: function (e) {
                                         switchImage();
                                     }
                                 });
}

function appendHotSpot(HotSpot, picture, ctx) {
    var imageWidth = document.getElementById('assessmentImage' + platform).clientWidth;

    var scale = imageWidth / picture.xSize;

    HotSpot.topLeft = [Math.round(HotSpot.topLeft[0] * scale), Math.round(HotSpot.topLeft[1] * scale)];
    HotSpot.bottomRight = [Math.round(HotSpot.bottomRight[0] * scale), Math.round(HotSpot.bottomRight[1] * scale)];

    var rect = {x1: HotSpot.topLeft[0], y1: HotSpot.topLeft[1], x2: HotSpot.bottomRight[0], y2: HotSpot.bottomRight[1]};

    ctx.strokeStyle="red";
    ctx.beginPath();
    ctx.moveTo(rect.x1, rect.y1);
    ctx.lineTo(rect.x2, rect.y1);
    ctx.lineTo(rect.x2, rect.y2);
    ctx.lineTo(rect.x1, rect.y2);
    ctx.lineTo(rect.x1, rect.y1);
    ctx.stroke();
}

var canvases = document.getElementsByTagName("canvas");
for(var i=0; i<canvases.length; i++)
{
  canvas = canvases[i];
  canvas.width = canvas.offsetWidth;
  canvas.height = canvas.offsetHeight;
}