无法获取HTML5 2D上下文来绘制点

我想绘制用户在画布上单击的所有点，直到用户单击第一次点击。我可以将它们存储在隐藏的输入中，但我无法让它们正确地在屏幕上绘制/显示（“ctx.fillRect（pos_x，pos_y，1，1）;”）。我的代码缺失了什么？我只看到第一点，它甚至不在我点击的位置（使用IE Edge查看）。最终我想添加点的绘制线。无法获取HTML5 2D上下文来绘制点

此外，作为一个额外的，有人可以帮助我确定点击是否在代码检测上下文菜单的时间内的画布？

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript"> 
     var c; 
     var ctx; 

     function wireUp() 
     { 
      // Initiate context. Do only once 
      c = document.getElementById('imgContainer'); 
      ctx = c.getContext('2d'); 

      // Store points 
      keepPoints('hiddenMap'); 

      // Override context when user has clicked within the canvas 
      window.oncontextmenu = function() 
      { 
       // TO DO: Detect click was within canvas area 
       clearMap('imgContainer', 'hiddenMap'); 
       return false; // cancel default menu 
      } 

      document.getElementById('imgContainer').onclick = function (e) { 
       // Detect RMB. See: http://stackoverflow.com/questions/2405771/is-right-click-a-javascript-event 
       var isRightMB; 
       e = e || window.event; 

       if ("which" in e) // Gecko (Firefox), WebKit (Safari/Chrome) & Opera 
        isRightMB = e.which == 3; 
       else if ("button" in e) // IE, Opera 
        isRightMB = e.button == 2; 

       if(!isRightMB) 
       { 
        pointDetected('imgContainer', 'hiddenMap', e); 
       } 
       else 
       { // Clear points, drawn and on map 
        alert("RMB"); 
        clearMap('imgContainer', 'hiddenMap'); 
       } 
      }; 
     } 
     function clearMap(container, map) 
     { 
      // Clear drawn points 
      var canvas = document.getElementById(container); 
      ctx.clearRect(0, 0, canvas.width, canvas.height); 

      // Clear map 
      var hMap = document.getElementById(map); 
      hMap.value = ""; 
     } 
     function pointDetected(container, map, event) 
     { 
      //alert("Oh my! " + container); 
      pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById(container).offsetLeft; 
      pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById(container).offsetTop; 
      //alert(pos_x + ", " + pos_y); 

      var hMap = document.getElementById(map); 
      if(hMap.value) // Check if the map has already points and append with comma 
      { 
       hMap.value = hMap.value + "; " + pos_x + ", " + pos_y; 
      } 
      else 
      { 
       hMap.value = pos_x + ", " + pos_y; 
      } 
      alert(hMap.value); 

      // Draw a point where clicked 
      ctx.fillRect(pos_x, pos_y, 1, 1); 
     } 
     function keepPoints(container) 
     { 
      // Stores all the points that the user has selected 
      var hidden = document.createElement("input"); 
      var typeAtt = document.createAttribute("type"); 
      typeAtt.value = "hidden"; 
      hidden.setAttributeNode(typeAtt); 
      hidden.id = container; 
      document.body.appendChild(hidden); 
     } 
    </script> 
</head> 
<body onload="wireUp();"> 
    <canvas style="background:url('untitled.png');width:819px;height:460px;border-style:solid;" id="imgContainer"> 
    </canvas> 
</body>

来源

2016-11-13 Jaquio

不要只是通过CSS设置画布的尺寸，使用它的'width'和'height'性能。 – Kaiido

谢谢，@Kaiido，它帮助。发布代码工作。 – Jaquio

我改变了代码创建使用ctx.moveTo和ctx.lineTo行。这和Kaiido的评论帮助我获得了代码的工作。

<!DOCTYPE html> 
<html> 
<head> 
    <script type="text/javascript"> 
      var c; 
      var ctx; 

     function wireUp() 
     { 
      // Initiate context. Do only once 
      c = document.getElementById('imgContainer'); 
      ctx = c.getContext('2d'); 
      ctx.lineWidth = 5; 
      ctx.strokeStyle = "#FF0000"; 

      // Store points 
      keepPoints('hiddenMap'); 

      // Override context when user has clicked within the canvas 
      window.oncontextmenu = function (e) 
      { 
       // TO DO: Detect click was within canvas area 
       clearMap('imgContainer', 'hiddenMap'); 
       return false; // cancel default menu 
      } 

      document.getElementById('imgContainer').onclick = function (e) { 
       // Detect RMB. See: http://stackoverflow.com/questions/2405771/is-right-click-a-javascript-event 
       var isRightMB; 
       e = e || window.event; 

       if ("which" in e) // Gecko (Firefox), WebKit (Safari/Chrome) & Opera 
        isRightMB = e.which == 3; 
       else if ("button" in e) // IE, Opera 
        isRightMB = e.button == 2; 

       if(!isRightMB) 
       { 
        pointDetected('imgContainer', 'hiddenMap', e); 
       } 
       else 
       { // Clear points, drawn and on map 
        alert("RMB"); 
        clearMap('imgContainer', 'hiddenMap'); 
       } 
      }; 
     } 
     function clearMap(container, map) 
     { 
      // Clear drawn points 
      var canvas = document.getElementById(container); 
      ctx.clearRect(0, 0, canvas.width, canvas.height); 

      // Clear map 
      var hMap = document.getElementById(map); 
      hMap.value = ""; 
     } 
     function pointDetected(container, map, event) 
     { 
      //alert("Oh my! " + container); 
      pos_x = event.offsetX?(event.offsetX):event.pageX-document.getElementById(container).offsetLeft; 
      pos_y = event.offsetY?(event.offsetY):event.pageY-document.getElementById(container).offsetTop; 
      //alert(pos_x + ", " + pos_y); 

      var hMap = document.getElementById(map); 
      if(hMap.value) // Check if the map has already points and append with comma 
      { 
       hMap.value = hMap.value + ";" + pos_x + "," + pos_y; 
     -  // Continue from last drawn point 
       ctx.lineTo(pos_x, pos_y); 
       ctx.stroke(); 
      } 
      else 
      { 
       hMap.value = pos_x + "," + pos_y; 
       // Draw a point where clicked 
       ctx.beginPath(); 
       ctx.moveTo(pos_x, pos_y); 
      } 
      //alert(hMap.value); 

      //ctx.fillRect(pos_x, pos_y, 1, 1); 
     } 
     function keepPoints(container) 
     { 
      // Stores all the points that the user has selected 
      var hidden = document.createElement("input"); 
      var typeAtt = document.createAttribute("type"); 
      typeAtt.value = "hidden"; 
      hidden.setAttributeNode(typeAtt); 
      hidden.id = container; 
      document.body.appendChild(hidden); 
     } 
    </script> 
</head> 
<body onload="wireUp();"> 
    <canvas style="background:url('untitled.png');border-style:solid;" width="819" height="460" id="imgContainer"> 
    </canvas> 
</body>

来源

2016-11-15 22:37:46 Jaquio

无法获取HTML5 2D上下文来绘制点

回答

相关问题