小编tre*_*ewt的帖子

我试图通过"mousemove"在画布上使用鼠标左右方形.

function start(){
    var canvastmp = document.getElementById("myCanvas")
    var canvas = canvastmp.getContext("2d");
    window.addEventListener('mousemove', trevor, false);
}
function trevor(pos){
    canvas.clearRect(0,0,600,400);
    var x = pos.clientX;
    var y = pos.clientY;
    canvas.fillRect(x-25,y-25,100,100);
}
window.addEventListener('load',start,false);

当我运行它时,什么都没有显示出来.我一直在调整它并且现在已经研究了一段时间,我似乎无法弄清楚什么是错的.再一次,我很抱歉这个完全没有问题!任何帮助都非常感谢.

此外,我正在使用Chrome,如果这有帮助.

我是编程的新手,我正在尝试创建一些代码,允许我通过按箭头键在Canvas周围移动一个方块.我能够让广场移动,但它的动作不是很平滑.我让它一次以10像素的增量移动,所以我理解为什么它会感觉有点生涩,因为10帧差异的每个位置之间没有任何动画,但让它以较小的增量移动会使它远太慢了.到目前为止我所做的工作如下:

window.onload = function init() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    setInterval(gameLoop,50);
    window.addEventListener('keydown',whatKey,true);
}

avatarX = 400
avatarY = 300

function gameLoop() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 800
    canvas.height = 600
    ctx.fillRect(avatarX,avatarY,50,50);
}

function whatKey(e) {
    switch(e.keyCode) {
    case 37:
        avatarX = avatarX - 10;
        break;
    case 39:
        avatarX = avatarX + 10;
        break;
    case 40:
        avatarY = avatarY + 10;
        break;
    case 38:
        avatarY = avatarY - 10;
        break;
    } …