Question

我是HTML5的新手，但有很好的HTML体验。我正在学习画布和制作程序的想法。在这里，我正在处理用户的mousedown和mouseup，并根据鼠标的坐标设置我的变量的值。然后在那些我的帮助下，我在画布上划出了一条未被正确绘制的线条。

我为实现这一目标所做的工作：

HTML

<script type="text/javascript" src="jquery.min.js"></script>
<script src="bhaiya.js"></script>
<canvas id="myCanvas"  style="height: 100%; width: 100%;">
</canvas>

JS

$(document).ready(function() {
    var $x1 = 0;
    var $x2 = 0;
    var $y1 = 0;
    var $y2 = 0;

    $(this).mousedown(function(e){
        $x1 = e.pageX;
        $y1 = e.pageY;
    });

    $(this).mouseup(function(e){
        $x2 = e.pageX;
        $y2 = e.pageY;

        var c = document.getElementById("myCanvas");
        var context = c.getContext("2d");
        context.moveTo($x1, $y1);
        context.lineTo($x2, $y2);
        context.stroke();
    });
});

有什么问题？任何帮助，将不胜感激！：）

Answer 1

1）如果你对绘图模糊并且似乎不遵循你给出的x和y的事实感到困扰，那么你可以像这样解决它：

var c = document.getElementById("myCanvas");
c.width = c.clientWidth;
c.height = c.clientHeight;

2）当它不完全位于文档的左上角时，你必须考虑画布位置引起的偏移：

$x1 = e.pageX-c.offsetLeft;
$y1 = e.pageY-c.offsetTop;

<强> Demonstration

请注意，在实际应用程序中，您不应每次都重新创建上下文。在这种情况下，您还可以在需要时（可能在每次单击时）开始新路径。

Answer 2

使用.beginPath()：

 var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(100, 150);
      context.lineTo(450, 50);
      context.stroke();

http://jsfiddle.net/j4XY8/ http://dev.opera.com/articles/view/html5-canvas-painting/（可能会有所帮助）

画布上没有正确绘制线条

2 个答案: