Question

我知道如何将画布背景颜色设置为纯色，但我想知道如何将背景颜色设置为闪烁'n'秒，然后恢复正常。

我问的原因是因为我正在开发一种运动计时器，闪烁的颜色可以作为开始的视觉提示。

据我所知，在C＃中没有标准属性来实现这一点，这就是我以编程方式提出的要求。

我猜它会涉及HTML5或java脚本，我目前还没有任何经验。

有没有人有这方面的经验或对解决方案有建议？

Answer 1

HTML：

<div class="smth"> 
<button id="active">Active</button>
    <button id="nactive">Non-Active</button>
  <div id="imADiv">Im a div</div>
</div>

CSS：

#imADiv{
  margin-top:50px;
  height:150px;
  width:150px;
  position:absolute;
}

@-webkit-keyframes demo {
    0% {
        background-color: transparent;
        opacity:1;
    }
    50% {
        background-color: yellow;
    }
    100% {
        background-color: transparent;
    }
}

.active{
  -webkit-animation-name: demo;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
  -moz-animation-name: demo;
    -moz-animation-duration: 500ms;
    -moz-animation-iteration-count: 1;
    -moz-animation-timing-function: linear;
}

JS：

$('.smth').on('click','#active',function(){
  $('#imADiv').addClass('active');
});

$('.smth').on('click','#nactive',function(){
  $('#imADiv').removeClass('active');
});

我想，你需要'主动'过渡。这就是我对flash的理解

Answer 2

更改画布背景颜色的一种方法是使用javascript：

此代码使用id =＆＃39; canvas＆＃39;：

更改画布的背景

document.getElementById("canvas").style.backgroundColor ='green';

使用requestAnimationFrame以一定间隔更改背景的示例代码和演示：

http://jsfiddle.net/m1erickson/3w2k5r87/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var startTime;
    var interval=1000;
    var index=0;
    var colors=['green','blue','gray','purple'];

    requestAnimationFrame(animate);


    function animate(time){
        requestAnimationFrame(animate);

        if(!startTime){startTime=time;}
        var elapsed=time-startTime;
        if(elapsed>interval){
            startTime=time;
            canvas.style.backgroundColor=colors[index];
            if(++index>colors.length){index=0;}
        }

    }

}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Answer 3

如果您正在构建本机应用程序，请尝试使用Microsoft Expression Blend。您可以添加Story板并尝试使用它。

如何将画布背景颜色设置为闪烁'n'秒？

3 个答案: