Javascript 画布鼠标指针未同步_Javascript_Jquery_Html_Css_Canvas

Javascript 画布鼠标指针未同步

javascript jquery html css canvas

Javascript 画布鼠标指针未同步,javascript,jquery,html,css,canvas,Javascript,Jquery,Html,Css,Canvas,我目前正在学习canvas touch event函数，我想在框内绘制线条，但绘图未与鼠标指针同步。请帮助检查我的代码并指出我犯的错误。谢谢大家! 这是代码 <!DOCTYPE html> <html><head> <style> #contain { width: 500px; height: 120px; top : 15px; margin: 0 auto; position: relative; } </style> &

我目前正在学习canvas touch event函数，我想在框内绘制线条，但绘图未与鼠标指针同步。请帮助检查我的代码并指出我犯的错误。谢谢大家!

这是代码

<!DOCTYPE html>
<html><head>
<style>
#contain {
width: 500px;
height: 120px;
top : 15px;
margin: 0 auto;
position: relative;    
}
</style>
<script>
      var canvas;
      var ctx;
      var lastPt=null;
      var letsdraw = false;

    function init() {
        var touchzone = document.getElementById("layer1");
        touchzone.addEventListener("touchmove", draw, false);
        touchzone.addEventListener("touchend", end, false);
        ctx = touchzone.getContext("2d");
      }

    function draw(e) {
        e.preventDefault();
        if(lastPt!=null) {
          ctx.beginPath();
          ctx.moveTo(lastPt.x, lastPt.y);
          ctx.lineTo(e.touches[0].pageX, e.touches[0].pageY);
          ctx.stroke();
        }
        lastPt = {x:e.touches[0].pageX, y:e.touches[0].pageY};
      }

    function end(e) {
          var touchzone = document.getElementById("layer1");
        e.preventDefault();
        // Terminate touch path
        lastPt=null;
      }
    function clear_canvas_width ()
        {
            var s = document.getElementById ("layer1");
            var w = s.width;
            s.width = 10;
            s.width = w;
        }
    </script>    
</head>

<body onload="init()">

<div id="contain">
<canvas id="layer1" width="450" height="440" 
   style="position: absolute; left: 0; top: 0;z-index:0; border: 1px solid #ccc;"></canvas> 
</div>

    </body>
</html>

按照注释中的建议，尝试使用偏移量

如果您有chrome，请转到开发者选项卡->设置->覆盖->启用触摸事件，以测试上述演示小提琴中的触摸事件

  var canvas;
  var ctx;
  var lastPt = null;
  var letsdraw = false;
  var offX = 10, offY = 20;


  function init() {
      var touchzone = document.getElementById("layer1");
      touchzone.addEventListener("touchmove", draw, false);
      touchzone.addEventListener("touchend", end, false);
      ctx = touchzone.getContext("2d");
  }

  function draw(e) {
      e.preventDefault();
      if (lastPt != null) {
          ctx.beginPath();
          ctx.moveTo(lastPt.x, lastPt.y);
          ctx.lineTo(e.touches[0].pageX - offX,
                     e.touches[0].pageY - offY);
          ctx.stroke();
      }
      lastPt = {
          x: e.touches[0].pageX - offX,
          y: e.touches[0].pageY - offY
      };
  }

  function end(e) {
      var touchzone = document.getElementById("layer1");
      e.preventDefault();
      // Terminate touch path
      lastPt = null;
  }

  function clear_canvas_width() {
      var s = document.getElementById("layer1");
      var w = s.width;
      s.width = 10;
      s.width = w;
  }

您需要检查元素偏移量，您面临的错误是什么？请考虑使用，但当我使用谷歌浏览器打开HTML文件时，画布鼠标指针仍然没有同步？我可以知道为什么吗？我只能在鼠标指向左边时画线。你看到演示了吗？是的。我将代码保存为HTML文件并用chrome打开，但当它达到全屏大小时。鼠标指针仍未同步。感谢您尝试更改offX和offY值，使其根据浏览器大小同步。