我试图稍微更改此jQuery代码：
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);
});
})
我在此HTML代码中使用的
<body>
<h2 id="status">0, 0</h2>
<canvas style="width: 1000px; height: 1000px; border:1px ridge green;" id="canvas">
</canvas>
</body>
</html>
并尝试通过按键绘制半径为5的圆。
我希望单击键盘上的某个键时，画布上会出现一个圆圈，而不是单击。因此，我应该保持鼠标位置。
我尝试了
mousemove：jQuery(document).ready(function(){
$('#canvas').attr('height', $('#canvas').css('height'));
$('#canvas').attr('width', $('#canvas').css('width'));
var x = -1;
var y = -1;
$("#canvas").mousemove(function(e) {
x = e.pageX;
y = e.pageY;
});
$("#canvas").keypress(function(e){
var ctx= this.getContext("2d");
ctx.beginPath();
ctx.arc(x, y, 5,0, 2*Math.PI);
ctx.stroke();
$('#status').html(x +', '+ y);
});
})
哪个没有用。
如您所料，jQuery是我的新手。因此，我可能会遇到一些语法错误（我相信不会，因为我的Chrome调试器未显示任何错误）。
我的最终目标是通过按键创建可拖动的圆圈。这是我的第一步。你能帮助我吗？
最佳答案
这里的主要问题是您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>关于javascript - 按下键时如何绘制以鼠标位置为中心的圆，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40555241/