如何使闪烁的文字画布动画

Question

我是新的画布脚本。我尝试在画布上创建一些条件，条件满足后条件将显示文字。在这里，我所做的条件。

if(fictionMeter > 26 && fictionMeter < 37) { 

     ctx.fillStyle = "#e86f14"; 
     ctx.font = "25px Bangers"; 
     ctx.fillText(
      "Alert Condition 1", 
      mx + 55, 
      my - 25 
     ); 

     ctx.font = "14px Bangers"; 
     ctx.fillText(
      "add some extra condition", 
      mx - 55, 
      my - 8 
     ); 
    } 

    if(fictionMeter > 37) { 

     ctx.fillStyle = "#d5292b"; 
     ctx.font = "25px Bangers"; 
     ctx.fillText(
      "DANGER CONDITION ONE", 
      mx + 45, 
      my - 25 
     ); 

     ctx.font = "14px Bangers"; 
     ctx.fillText(
      "DANGER extra condition one", 
      mx - 10, 
      my - 8 
     ); 
    } 

    ctx.restore(); 
} 

我的问题是如何增加它闪烁的文字动画？，其文本动画会出现一秒钟，不是隐藏，直到其他条件满足。

Answer 1

使用自己的动画属性跟踪对象的更简单的方法是创建表示它们的对象。这样，您可以使用当前时间和独立地驱动对象。

例如（见注释）：

var ctx = c.getContext("2d"), bg = 0, db = 0.01; 
 

 
// BlinkText objects which will hold appearance and timings 
 
function BlinkText(txt, x, y, interval) { 
 
    this.text = txt; 
 
    this.x = x; 
 
    this.y = y; 
 
    this.interval = interval; 
 
    this.font = "bold 20px sans-serif"; 
 
    this.color = "#f00"; 
 
    this.active = false; 
 
    this.time = 0; 
 
    this.toggle = true; 
 
} 
 

 
// If several instances is to be defined, use prototypal approach 
 
BlinkText.prototype = { 
 
    start: function(time) { 
 
    this.time = time;  // store start time to calc. delta 
 
    this.active = true;  // enable drawing in render() 
 
    this.toggle = true;  // reset toggle flag so first check is "on" 
 
    }, 
 
    
 
    stop: function() { 
 
    this.active = false;  // disable drawing in render() 
 
    }, 
 
    
 
    render: function(ctx) { // render if active 
 
    if (this.active) { 
 
     if (this.toggle) {  // are we on nor off? 
 
     ctx.font = this.font; 
 
     ctx.fillStyle = this.color; 
 
     ctx.fillText(this.text, this.x, this.y); // render text if on 
 
     } 
 
     
 
     // calc time interval and toggle every other time 
 
     var time = performance.now(); 
 
     if (time - this.time >= this.interval) { // passed interval? 
 
     this.time = time;      // update start time 
 
     this.toggle = !this.toggle;    // toggle state 
 
     } 
 
    } 
 
    } 
 

 
}; 
 

 
// create a couple of instances 
 
var txt1 = new BlinkText("Hello there..", 50, 50, 500); 
 
var txt2 = new BlinkText("This is blinking too", 100, 90, 900); 
 
var txt3 = new BlinkText("All independant, but controlable...", 10, 120, 300); 
 
txt2.color = "#00f";    // set some custom properties 
 
txt3.font = "16px sans-serif"; 
 
txt3.color = "#090"; 
 

 
(function loop() { 
 
    // draw other stuff 
 
    ctx.fillStyle = "hsl(0,0%, " + (bg * 40) + "%)"; 
 
    ctx.fillRect(0, 0, c.width, c.height); 
 
    txt1.render(ctx); // call render() regardless of state 
 
    txt2.render(ctx); 
 
    txt3.render(ctx); 
 

 
    bg += db; 
 
    if (bg <0 || bg > 1) db = -db; 
 
    requestAnimationFrame(loop) 
 
})(); 
 

 
bstart.onclick = function() { 
 
    txt1.start(performance.now()); // init start with current time 
 
    txt2.start(performance.now()); 
 
    txt3.start(performance.now()); 
 
}; 
 

 
bstop.onclick = function() { 
 
    txt1.stop(); 
 
    txt2.stop(); 
 
    txt3.stop(); 
 
};

<canvas id=c></canvas><br> 
 
<button id=bstart>Start</button> <button id=bstop>Stop</button>