0

我是 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();
    });
});

问题是什么？任何帮助，将不胜感激！:)

4

2 回答 2

2

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;

示范

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

于 2013-06-09T09:38:21.260 回答
0

使用.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/（可能会有所帮助）

于 2013-06-09T09:34:17.337 回答