在画布上绘图时偏移

Question

Have a simple drawing application. 有一个简单的绘图应用程序 The problem is in the coordinates ( redraw function): they must be mouse, but are near 2x mouse. 问题出在坐标（ redraw功能）中：它们必须是鼠标，但接近2x鼠标。 What's the problem in the code? 代码中的问题是什么？

<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>

Answer 1

You should not set a canvas' width/height through CSS. 您不应该通过CSS设置画布的宽度/高度。 It makes the canvas stretch instead of making the resolution higher. 它使画布伸展而不是提高分辨率。 This means that although the coordinates are correct, they will visually end up somewhere else. 这意味着虽然坐标是正确的，但它们在视觉上最终会在其他地方结束。

For example, an x coordinate of 100 will be stretched to visually be an x coordinate of 200 (or something else; at least it will be bigger than 100 since it's been stretched). 例如，x坐标100将被拉伸到视觉上是一个200的x坐标（或其他东西;至少它会因为它被拉伸而大于100 ）。

Instead, use: 相反，使用：

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

and remove the width: 100% in CSS. 并删除CSS中的width: 100% 。

http://jsfiddle.net/euXJC/1/ http://jsfiddle.net/euXJC/1/

在画布上绘图时偏移

问题描述

1 个解决方案

解决方案1
12 已采纳 2012-01-01 15:23:30

在画布上绘图时偏移

问题描述

1 个解决方案

解决方案1 12 已采纳 2012-01-01 15:23:30

解决方案1
12 已采纳 2012-01-01 15:23:30