Question

我需要填写空白以完成mouseMoved功能。

我试图完成它，但我知道这是完全错误的！有人请帮助我，我很抱歉新手问题:(

项目说明：

让它画画！现在你真的要让这个程序画画！添加mouseMoved函数： - 使用mouseX和mouseY变量，根据当前鼠标位置更改画笔x和y属性; - 调用绘画函数paintCanvas;

提示：如果您不确定如何使用mouseMoved，请查看文档。

 mouseMoved = function() {
        paintBrush._____ =  _____;
        paintBrush._____ =  _____;
        _____;
        };



    var paintBrush = {
    x: 100,
    y: 100,
    img: getImage("avatars/leaf-red")

    mouseMoved = function() {
        paintBrush.x = MouseX;
        paintBrush.y = MouseY;
        paintCanvas;
    };



var paintCanvas = function() {
    imageMode(CENTER);
    image(paintBrush.img, paintBrush.x, paintBrush.y);
    };

    paintCanvas();

Answer 1

有趣的部分是

mouseMoved = function() {
    paintBrush._____ =  _____;
    paintBrush._____ =  _____;
    _____;
    };

功能。实际上，您需要调用此函数并传入游标坐标的参数。然后，将paintBrush对象的属性设置为这些参数。

这是一个有效的例子......

＆＃13;

/*mouseMoved = function() {
        paintBrush._____ =  _____;
        paintBrush._____ =  _____;
        _____;
        };
*/

//init the object...
var paintBrush = {};

//it's good practice to always incldue an onload event before doing anything involving elements on the page...
window.addEventListener('load',init());


function init(){
  //add a global mousemove event...
  window.addEventListener('mousemove',mouseMoved);
  //remember! The event object containing the coordinates you want is passed with the event object. The event object is implied. Note that I have "e" in the function argument.
  function mouseMoved(e){
    paintBrush.x = e.clientX;//get the cursor's x coord.
    paintBrush.y = e.clientY;//get the cursor's y coord.
    console.log(paintBrush.x+'\n'+paintBrush.y+'\n');
    //repaint the canvas...
  }
}

＆＃13;

旁注：我是一名高中毕业生，自从我12岁就开始自学JavaScript。网上有很多JavaScript资源。恭喜您使用SO。这里的社区很棒。祝你学习顺利！

Javascript mouseMoved函数

1 个答案: