Question

我正在使用它来改变填充的颜色，创建js这不起作用

var shape_rect = new createjs.Shape();
shape_rect.graphics.beginFill("#FFD64B").drawRect(61, 253, 398, 25);
shap_rect3.addEventListener('mouseover', function (evt) {
    shap_rect3.graphics.beginFill("#FFD64B").drawRect(61, 253, 398, 25);
    stage.update();
});

Answer 1

这里只有几件事：

首先我注意到eventListener链接到shap_rect3但是还没有定义（至少在你的例子中没有）。鼠标悬停颜色也与声明的颜色相同，因此您不会看到正在进行的任何更改。

这应该对你有用，假设shap_rect3是一个拼写错误。

loadGame = function() {
    var canvas = document.getElementById('canvas');
    var stage = new createjs.Stage(canvas);

    stage.enableMouseOver(); //Enable MouseOver events

    var shape_rect = new createjs.Shape(); //Create your shape variable
    shape_rect.graphics.beginFill("#FFD64B").drawRect(61, 253, 398, 25); //Draw initial rectangle

    shape_rect.on('mouseover', function(evt) { //Change colour on mouseOver
        shape_rect.graphics.beginFill("#FF5400").drawRect(61, 253, 398, 25);
        stage.update(evt);
    });

    //Add this if you want to simulate a hover state and return the rectangle back to it's original colour
    shape_rect.on('mouseout', function(evt) { //.on gives the same result as .addEventListener (at least from a visual perspective, I'm not sure about resource usage)
        shape_rect.graphics.beginFill("#FFD64B").drawRect(61, 253, 398, 25);
        stage.update(evt);
    });

    stage.addChild(shape_rect);
    stage.update();
}

我是创建JS和画架的新手，但这是实现这一目标的一种方式。然后只需运行loadGame函数onLoad：

<body onLoad="loadGame()">
    <canvas id="canvas" width="640" height="640"></canvas>
</body>

我如何在创建js中更改图形的填充颜色

1 个答案: