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

How to set a canvas background color to flash for 'n' seconds?

本文关键字：设置 闪烁 颜色 布背景 背景      更新时间：2023-09-26

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

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

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

我猜这将涉及HTML5或java脚本，我还没有任何经验。

有人在这方面有经验吗？或者有解决方案的建议吗？

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

此代码更改id为"canvas"的画布的背景：

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>

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

您在这里有一把小提琴：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 的理解

相关文章：