एचटीएमएल 5 कैनवास में पाठ के लिए प्रभाव फ़ेड आउट

मैं एचटीएमएल 5 कैनवास में साधारण पाठ ड्राइंग कर रहा हूँ इस का उपयोग करते हुए:एचटीएमएल 5 कैनवास में पाठ के लिए प्रभाव फ़ेड आउट

context.fillStyle = "#FF0000" 
context.font = "italic 20pt Arial"; 
context.fillText("sfddsfs", 50, 50);

अब मैं इस पाठ से बाहर फीका चेतन करना चाहते हैं। वह कैसे किया जा सकता है?

संपादित करें: मुझे पता है कि वर्तमान में ऐसा करने के लिए उपयोग करने के लिए कोई तैयार नहीं है (कम से कम मुझे कुछ भी नहीं मिल रहा है)। मैं ग्राफिक प्रोग्रामिंग में एक नोब हूं लेकिन सीखना चाहता हूं, इसलिए कहां से शुरू करना है इसके बारे में कोई संकेत है।

शायद कुछ अपने कैनवास में टेक्स्ट डालने और कैनवास के ग्लोबल अल्फा को बदलने जैसा कुछ ...? लेकिन कैनवास की पृष्ठभूमि पारदर्शी होनी चाहिए। और प्रदर्शन के बारे में नहीं जानते, बहुत सारे छोटे लेबल दिख रहे हैं और हर जगह गायब हो गए हैं जिन्हें फीका होना चाहिए।

स्रोत

2012-03-29 Ixx

jQuery चेतन यहाँ देखें: http://stackoverflow.com/questions/5333156/using-jquery-animate-on-canvas-objects –

यह आसान अगर आप RGBA() संकेतन का उपयोग हेक्साडेसिमल नोटेशन बजाय फ़िलस्टाइल स्थापित करने के लिए है। यहाँ एक काम कर उदाहरण (demo) है:

// Create a canvas element and append it to <body> 
var canvas = document.createElement('canvas'), 
    context = canvas.getContext('2d'); 
document.body.appendChild(canvas); 


function fadeOut(text) { 
    var alpha = 1.0, // full opacity 
     interval = setInterval(function() { 
      canvas.width = canvas.width; // Clears the canvas 
      context.fillStyle = "rgba(255, 0, 0, " + alpha + ")"; 
      context.font = "italic 20pt Arial"; 
      context.fillText(text, 50, 50); 
      alpha = alpha - 0.05; // decrease opacity (fade out) 
      if (alpha < 0) { 
       canvas.width = canvas.width; 
       clearInterval(interval); 
      } 
     }, 50); 
} 

fadeOut('sfddsfs');

स्रोत

2012-03-29 20:56:26 Ori

महान जवाब, लेकिन मैं पहले एनीमेशन फ्रेम का उपयोग करने की कोशिश करता हूं और सेट अंतराल पर फ़ॉलबैक: http://www.w3.org/TR/animation-timing/ – Ericson578

आप एनीमेशन के लिए प्रत्येक बार कैनवास साफ़ कर रहे हैं, लेकिन अगर मेरे पास पहले से कुछ है कैनवास पर ड्राइंग? पूर्व के लिए इसे देखें-> http://jsfiddle.net/dlinx/EhD7J/305/ –

अपने मामले में आप प्रत्येक बार लुप्तप्राय पाठ के लिए विशिष्ट क्षेत्र को साफ़ करने के लिए clearRect (...) का उपयोग कर सकते हैं, लेकिन संभावित घटना में कुछ ओवरलैप आपको केवल अन्य तत्वों को सही क्रम में दोबारा बनाना होगा। संपादित करें: http://www.w3schools.com/tags/canvas_clearrect.asp – GPMorgan

इसमें कोई अंतर्निहित समाधान नहीं है। आपको प्रत्येक फ्रेम को व्यक्तिगत रूप से चित्रित करके एनीमेशन (फीका) करना होगा:

कुछ समय फ़ंक्शन सेट करें जो # FF0000 और पृष्ठभूमि रंग के बीच ढाल की गणना करता है और पृष्ठभूमि रंग तक पहुंचने तक टेक्स्ट को ऊपर और ऊपर फिर से चलाता है।

स्रोत

2012-03-29 20:40:22 stewe

मुझे लगता है कि मुझे यह मिला। यह उल्लेख करना भूल गया कि मेरे पास पहले से ही लूप और टेक्स्ट ऑब्जेक्ट्स हैं जो प्रत्येक फ्रेम को कैनवास पर खींचते हैं।

तो समाधान पाठ वस्तुओं के लिए अल्फा चर जोड़ने के लिए है:

this.alpha = 1;

और प्रत्येक x फ्रेम या समय यह थोड़ा कम।

और पाश प्रस्तुत करना में:

context.globalAlpha = textObject.alpha; 
//draw the text 
context.globalAlpha = 1;

स्रोत

2012-03-29 20:53:17 Ixx

एचटीएमएल 5 कैनवास में पाठ के लिए प्रभाव फ़ेड आउट

उत्तर

संबंधित मुद्दे