小编btf*_*btf的帖子

我正在尝试使用ctx.lineTo()在画布上绘制一些矩形.它们被绘制但是y坐标永远不对.矩形变得太高,在y轴上的错误位置.当我逐步使用调试器时,它会将lineTo()方法中的y坐标显示为正确,但我创建了一个canvas.click事件以提醒坐标(当我点击左上角时它是正确的,它会发出警报(0) ,0)).click事件显示y坐标实际上不是它将在lineTo()方法中绘制的状态.但是,x坐标始终是正确的.有一点需要考虑的是我通过将jtml附加到带有javascript的元素来创建我的画布,然后我添加了一个我绘制的图像.我重新缩放矩形的坐标,使它们适当地放在画布上,缩放到适合设备大小的图像大小.这是我从画布创建到使用lineTo()方法的所有代码.

Canvas在此方法的早期阶段创建(在appendPicture()中):

function appendSection(theSection, list) {
    list.append('<label class="heading">' + theSection.description + '</label><br/><hr><br/>');
    if (theSection.picture) {
        appendPicture(list, theSection);
        var canvas = document.getElementById('assessmentImage');
        var ctx=canvas.getContext("2d");
         canvas.addEventListener("mousedown", relMouseCoords, false);

        var img=new Image();
            img.onload = function() {
                ctx.drawImage(img, 0, 0,canvas.width,canvas.height);
            }
            img.src = "data:image/jpeg;base64,"+ theSection.picture;

        img.addEventListener('load', function() { 
            if(theSection.allHotSpots.length > 0) {
                for( var x = 0; x < theSection.allHotSpots.length; x++) {
                    appendHotSpot(theSection.allHotSpots[x], theSection.thePicture, ctx);
                }
            }

        }, false);

    }
    appendSectionQuestions(theSection, list);
    if (theSection.allSubSections) {
        for (var x = 0; x < theSection.allSubSections.length; …