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

【问题标题】：How to set a canvas background color to flash for 'n' seconds?如何将画布背景颜色设置为闪烁'n'秒？
【发布时间】：2014-10-05 22:25:09
【问题描述】：

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

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

据我所知，在 C# 中没有标准属性可以实现这一点，这就是我以编程方式询问的原因。

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

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

【问题讨论】：

标签： javascript c# html windows-phone-8 canvas

【解决方案1】：

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

此代码更改 id='canvas' 的画布的背景：

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

示例代码和一个使用requestAnimationFrame间隔改变背景的Demo：

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>

【讨论】：

【解决方案2】：

如果您正在构建原生应用程序，请尝试使用 Microsoft Expression Blend。您可以添加故事板并尝试使用它。

【讨论】：

【解决方案3】：

你在这里有一个小提琴：http://jsfiddle.net/e9hay6u3/

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的理解

【讨论】：