Canvas 圆形颜色过渡
我有一个简单的脚本,上面画了一个圆圈:Canvas 圆形颜色过渡,canvas,colors,kineticjs,transition,Canvas,Colors,Kineticjs,Transition,我有一个简单的脚本,上面画了一个圆圈: var stage = new Kinetic.Stage({ container: 'container', width: 578, height: 200 }); var layer = new Kinetic.Layer(); var circle = new Kinetic.Circle({ x: stage.getWidth() / 2, y: stage.getHeight() / 2, ra
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'red'
});
layer.add(circle);
stage.add(layer);
我想做的是在5秒内将这个圆圈的颜色从红色过渡到蓝色(例如)。有什么方法可以做到这一点吗?您可以使用tween来更改圆的颜色:
var tween = new Kinetic.Tween({
node: circle,
fillR:0,
fillG:0,
fillB:255,
duration:5
});
tween.play();
下面是代码和小提琴:
原型
#容器{
边框:实心1px#ccc;
边缘顶部:10px;
宽度:400px;
高度:400px;
}
$(函数(){
var阶段=新的动力学阶段({
容器:'容器',
宽度:400,
身高:400
});
var layer=新的动能层();
阶段。添加(层);
var循环=新的动力学循环({
x:stage.getWidth()/2,
y:stage.getHeight()/2,
半径:70,
填充:“红色”
});
图层。添加(圆圈);
layer.draw();
document.getElementById('recolr')。addEventListener('click',function(){
var tween=新的动力学。tween({
节点:圆,
fillR:0,
菲尔格:0,
B:255,
持续时间:5
});
tween.play();
},假);
}); // end$(函数(){});
回忆
在哪里可以获得此类信息?在他们的fillR、G、B中找不到fill*
选项,这是记录在这里的Kinetic.Shape对象的一部分:我对Kinetic文档有复杂的感觉。他们的示例站点是关于Kinetic(以及一般的画布)的最佳和最易访问的信息来源之一:但他们的Kineticjs.com文档绝对不便于访问。我猜由于Kinetic的发展很快,文档的优先级较低。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:400px;
height:400px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 400
});
var layer = new Kinetic.Layer();
stage.add(layer);
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 70,
fill: 'red'
});
layer.add(circle);
layer.draw();
document.getElementById('recolor').addEventListener('click', function() {
var tween = new Kinetic.Tween({
node: circle,
fillR:0,
fillG:0,
fillB:255,
duration:5
});
tween.play();
}, false);
}); // end $(function(){});
</script>
</head>
<body>
<button id="recolor">Recolor</button>
<div id="container"></div>
</body>
</html>