相关疑难解决方法(0)

Canvas lineTo()在错误的位置绘制y坐标

我正在尝试使用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; …
Run Code Online (Sandbox Code Playgroud)

javascript canvas

7
推荐指数
1
解决办法
2920
查看次数

使用鼠标位置绘制圆圈

我试图通过单击并拖动鼠标指针来绘制一个圆.你在PowerPoint或其他方面的方式.圆圈的中心出现在奇怪的地方,我无法解释.

这是jsfiddle:https://jsfiddle.net/h8t3hfa2/2/

这就是我获得开始和结束位置的方式;

$('#c').mousedown(function(event) {
  var parentOffset = $(this).offset();
  circle = new Circle();
  circle.start['x'] = event.pageX - parentOffset.left;
  circle.start['y'] = event.pageY - parentOffset.top;

});

$('#c').mouseup(function(event) {
  var parentOffset = $(this).offset();
  circle.end['x'] = event.pageX - parentOffset.left;
  circle.end['y'] = event.pageY - parentOffset.top;
  circle.draw(canvas[0]);

});
Run Code Online (Sandbox Code Playgroud)

当我控制台记录中点时,它看起来是正确的,但圆圈显示在其他地方.有任何想法吗?

javascript html5 canvas

4
推荐指数
1
解决办法
1263
查看次数

标签 统计

canvas ×2

javascript ×2

html5 ×1