我如何在创建js中更改图形的填充颜色 [英] How i change fill color of graphics in create js
本文介绍了我如何在创建js中更改图形的填充颜色的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用此更改颜色填充创建js这不起作用
I am using this for change color of fill in create js this is not working
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();
});
推荐答案
这里有几件事情：
首先，我注意到eventListener链接到shap_rect3，但尚未定义（至少在您的示例中没有）。鼠标悬停颜色也与声明的颜色相同，因此您不会看到任何更改。
Firstly I noticed that the eventListener is linked to shap_rect3 but this hasn't been defined (at least not in your example). The mouseover colour is also the same as the declared colour, so you won't see any changes being made.
这应该对您有用，假设shap_rect3是拼写错误。
This should work for you, assuming the shap_rect3 was a typo.
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();
}
我是createJS和easelJS的新手，但这是达到此目的的一种方法。然后只需运行loadGame函数onLoad：
I'm new to createJS and easelJS but this is one way of achieving this. Then just run the loadGame function onLoad:
<body onLoad="loadGame()">
<canvas id="canvas" width="640" height="640"></canvas>
</body>
这篇关于我如何在创建js中更改图形的填充颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
