Question

我正在尝试稍微改变这个jQuery代码：

<!DOCTYPE html>
<html>
<head>
<script>
	var xhr = new XMLHttpRequest();
	var json;
	var setIntervalCounter = 0;
	var circleCounter = 0;
	var rectangleCounter = 0;
	var errorCounter = 0;
	var repeatRequest = setInterval(function(){
	xhr.onreadystatechange = incrementer();
	xhr.open("GET", "http://courses.acs.uwinnipeg.ca/2909-001/assignments/A2Q2.php");
	xhr.send();
	setIntervalCounter++;
	if (setIntervalCounter === 20){
	clearInterval(repeatRequest)
	}}, 1000);
	
	
	if (setIntervalCounter === 20){
		
		results();
	
	}
	
	//functions
	function incrementer(){
	json = xhr.responseText;
	if (json.includes("circle")){
		circleCounter++;
	}
	else if (json.includes("rectangle")){
		rectangleCounter++;
	}
	else {
		errorCounter++;
	}
	};
	
	function results(){
		var p1 = document.createElement("p");
		var p2 = document.createElement("p");
		var p3 = document.createElement("p");
		
		p1.innerHTML = "There are " + circleCounter;
		p2.innerHTML = "There are " + rectangleCounter;
		p3.innerHTML = "There are " + errorCounter;
		
		var div = document.getElementById("results");
		
		div.appendChild(p1);
		div.appendChild(p2);
		div.appendChild(p3);
	};
</script>
</head>
<body>
<div id = "results"></div>
</body>
</html>

我使用此HTML代码

jQuery(document).ready(function(){
$('#canvas').attr('height', $('#canvas').css('height'));
$('#canvas').attr('width', $('#canvas').css('width'));
     $("#special").click(function(e){ 

        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop; 

        /* var c=document.getElementById("special"); */
        var ctx= this.getContext("2d"); /*c.getContext("2d");*/
        ctx.beginPath();
        ctx.arc(x, y, 50,0, 2*Math.PI);
        ctx.stroke();

        $('#status').html(x +', '+ y); 
   }); 
})

并按下按键，尝试绘制半径为5的圆圈。

每当我按下键盘上的某个键时，我都希望在画布上显示一个圆圈，而不是点击。因此，我应该保持鼠标位置。

我尝试了<body> <h2 id="status">0, 0</h2> <canvas style="width: 1000px; height: 1000px; border:1px ridge green;" id="canvas"> </canvas> </body> </html>：

mousemove

哪个不起作用。

你可以猜到，我对jQuery很新。因此，我可能会遇到一些语法错误（我相信我不会因为我的Chrome调试器没有显示任何错误）。

我的最终目标是用按键创建可拖动的圆圈。这是我的第一步。你能救我吗？

Answer 1

这里的主要问题是你can't focus on a canvas而没有焦点，它不需要键盘输入。相反，在keypress上设置document侦听器并检查您是否在画布上。

jQuery(document).ready(function() {
  $('#canvas').attr('height', $('#canvas').css('height'));
  $('#canvas').attr('width', $('#canvas').css('width'));
  var x = -1;
  var y = -1;

  // Make sure the mouse is over the canvas
  var overCanvas = false;
  $('#canvas').mouseover(function() {
    overCanvas = true;
  });
  $('#canvas').mouseleave(function() {
    overCanvas = false;
  });
  $("#canvas").mousemove(function(e) {
    // Use offset[X/Y] instead of page[X/Y]
    // page[X/Y] will only be accurate if the canvas
    // takes up the whole page
    x = e.offsetX;
    y = e.offsetY;
  });
  $(document).keypress(function(e) {
    if (!overCanvas) {
      return;
    }
    var canvas = $('#canvas')[0];
    var ctx = canvas.getContext("2d");
    ctx.strokeStyle = '#FFF'; // Stroke in white
    ctx.beginPath();
    ctx.arc(x, y, 5, 0, 2 * Math.PI);
    ctx.stroke();

    $('#status').html(x + ', ' + y);
  });

})

canvas {
  display: block;
  background: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="320" height="240"></canvas>
<span id="status"></span>

按下某个键时，如何在鼠标位置绘制圆心

1 个答案: