我正在尝试稍微更改此 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 的圆。
每当我按下键盘上的某个键时，我希望在 Canvas 上出现一个圆圈，而不是单击。因此，我应该保持鼠标位置。
我尝试了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如果没有焦点，则不需要键盘输入。相反，在文档上设置一个按键监听器并检查您是否在 Canvas 上。
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/