Javascript 在画布上绘制时的偏移_Javascript_Jquery_Mouse_Draw_Html5 Canvas

Javascript 在画布上绘制时的偏移

javascript jquery html5-canvas

Javascript 在画布上绘制时的偏移,javascript,jquery,mouse,draw,html5-canvas,Javascript,Jquery,Mouse,Draw,Html5 Canvas,有一个简单的绘图应用程序。问题在于坐标（redrawfunction）：它们必须是鼠标，但接近2x鼠标。代码中有什么问题 <html> <head> <style type="text/css" media="screen"> body{ background-color: green; } #workspace{ width: 700px; height:420px; margin: 40px auto 20px a

有一个简单的绘图应用程序。问题在于坐标（

redraw

function）：它们必须是鼠标，但接近2x鼠标。代码中有什么问题

<html>
<head>
    <style type="text/css" media="screen">
body{
    background-color: green;
}

#workspace{
    width: 700px;
    height:420px;
    margin: 40px auto 20px auto;
    border: black dashed 1px;
}

#canvas{
    background: white;
    width: 100%;
    height: 100%;
}
    </style>
<script type="text/javascript" src="jquery-1.7.1.js"></script> 
<script type="text/javascript">
$(document).ready(
    function() {
        var context = document.getElementById('canvas').getContext("2d");
        var clickX = new Array();
        var clickY = new Array();
        var clickDrag = new Array();
        var paint;

        $('#canvas').mousedown(function(e){
            var mouseX = e.pageX - this.offsetLeft;
            var mouseY = e.pageY - this.offsetTop;
            paint = true;
            addClick(mouseX,mouseY, false);
            redraw();
        });

        $('#canvas').mousemove(function(e){
            if(paint){
                addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
                redraw();
            }
        });

        $('#canvas').mouseup(function(e){
            paint = false;
        });

        $('#canvas').mouseleave(function(e){
            paint = false;
        });

        function addClick(x, y, dragging)
        {
            clickX.push(x);
            clickY.push(y);
            clickDrag.push(dragging);
        }

        function redraw(){
            canvas.width = canvas.width; // Clears the canvas

            context.strokeStyle = "#df4b26";
            context.lineJoin = "round";
            context.lineWidth = 5;

            for(var i=1; i < clickX.length; i++)
            {
                context.beginPath();
                if(clickDrag[i] && i){
                    context.moveTo(clickX[i-1], clickY[i-1]);
                }else{
                    context.moveTo(clickX[i], clickY[i]);
                }
                context.lineTo(clickX[i], clickY[i]);
                context.closePath();
                context.stroke();
            }

            console.log(clickX[clickX.length-1]+" "+clickY[clickX.length-1]);
        }
    });
</script>
</head>
<body>
<div id="workspace">
<canvas id="canvas"/>
</div>
</body>
</html>


身体{
背景颜色：绿色；
}
#工作空间{
宽度：700px；
高度：420px；
利润率：40px自动20px自动；
边框：黑色虚线1px；
}
#帆布{
背景：白色；
宽度：100%；
身高：100%；
}
$（文件）。准备好了吗(
函数（）{
var context=document.getElementById（'canvas'）.getContext（“2d”）；
var clickX=新数组（）；
var clickY=新数组（）；
var clickDrag=新数组（）；
var涂料；
$（“#画布”）.mousedown（函数（e）{
var mouseX=e.pageX-this.offsetLeft；
var mouseY=e.pageY-this.offsetTop；
油漆=真；
addClick（mouseX、mouseY、false）；
重画（）；
});
$（'#canvas'）.mousemove（函数（e）{
如果（油漆）{
addClick（e.pageX-this.offsetLeft，e.pageY-this.offsetTop，true）；
重画（）；
}
});
$（'#canvas'）.mouseup（函数（e）{
油漆=假；
});
$（'#canvas'）.mouseleave（函数（e）{
油漆=假；
});
功能添加单击（x、y、拖动）
{
点击x，推送（x）；
clickY.push（y）；
单击拖动。推送（拖动）；
}
函数重画（）{
canvas.width=canvas.width；//清除画布
context.strokeStyle=“#df4b26”；
context.lineJoin=“round”；
context.lineWidth=5；
对于（变量i=1；i

您不应该通过CSS设置画布的宽度/高度。它使画布拉伸，而不是使分辨率更高。这意味着，尽管坐标是正确的，但它们在视觉上会在其他地方结束

例如，

的x坐标将被拉伸为

的x坐标（或者其他；至少，自从拉伸后它将大于

）

相反，请使用：

<canvas id="canvas" width="700" height="420" />

并删除CSS中的

宽度：100%

删除

css中的宽度
，这是我的关键