如何設置畫布背景顏色閃爍'n'秒？

我知道如何將畫布背景顏色設置爲純色，但我想知道如何將背景顏色設置爲閃爍'n'秒然後恢復正常。如何設置畫布背景顏色閃爍'n'秒？

我問的原因是因爲我正在開發一個運動計時器，其中閃爍的顏色作爲視覺提示開始。

據我所見，在C＃中沒有標準屬性來實現這一點，這就是爲什麼我以編程方式提問。

我猜它會涉及到HTML5或Java腳本，我還沒有任何經驗。

有沒有人有這方面的經驗或有解決方案的建議？

來源

2014-10-05 Brian J

如果您正在構建原生應用程序，請使用Microsoft Expression Blend嘗試。您可以添加Story板並嘗試使用它。

來源

2014-10-06 06:11:40 Praveen

你有一個小提琴在這裏：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'); 
});

您需要的 '主動' 轉變，一世假設。這就是我所說的閃光理解改變畫布的背景色

來源

2014-10-05 22:51:23

一種方法是使用javascript：

這段代碼改變ID爲畫布的背景=「畫布」：

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>

來源

2014-10-05 22:57:35 markE

如何設置畫布背景顏色閃爍'n'秒？

回答

相關問題