Fade out hiệu ứng cho văn bản trong HTML5 canvas

Tôi vẽ văn bản đơn giản trong HTML5 canvas sử dụng này:Fade out hiệu ứng cho văn bản trong HTML5 canvas

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

Bây giờ tôi muốn để animate phai ra của văn bản này. Làm thế nào có thể được thực hiện?

Chỉnh sửa: Tôi biết rằng hiện tại chưa sẵn sàng để sử dụng cách này (ít nhất tôi không thể tìm thấy bất kỳ thứ gì). Tôi là một noob trong lập trình đồ họa nhưng muốn tìm hiểu, vì vậy bất kỳ gợi ý về nơi để bắt đầu được đánh giá cao.

Có thể giống như đặt văn bản trong khung hình của riêng mình và thay đổi globalAlpha của canvas ...? Nhưng nền của canvas sẽ phải minh bạch. Và không biết về hiệu suất, có rất nhiều nhãn nhỏ xuất hiện và biến mất ở khắp mọi nơi mà cần phải được phai mờ.

Nguồn

2012-03-29 Ixx

jQuery động Xem ở đây: http://stackoverflow.com/questions/5333156/using-jquery-animate-on-canvas-objects –

Sẽ dễ dàng hơn nếu bạn sử dụng rgba() ký hiệu để thiết lập fillstyle chứ không phải là các ký hiệu thập lục phân. Dưới đây là một ví dụ làm việc (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');

Nguồn

2012-03-29 20:56:26 Ori

lớn câu trả lời, nhưng tôi sẽ thử sử dụng một khung hình ảnh động đầu tiên và dự phòng để setInterval: http://www.w3.org/TR/animation-timing/ – Ericson578

Bạn đang xóa canvas mỗi lần cho hoạt ảnh, Nhưng nếu tôi đã có một số vẽ trên vải? cho ví dụ. xem này-> http://jsfiddle.net/dlinx/EhD7J/305/ –

Trong trường hợp của bạn, bạn có thể sử dụng clearRect (...) để xóa khu vực cụ thể cho văn bản mờ dần mỗi lần, nhưng trong trường hợp có khả năng có một số chồng chéo bạn sẽ chỉ phải vẽ lại các phần tử khác theo đúng thứ tự. CHỈNH SỬA: http://www.w3schools.com/tags/canvas_clearrect.asp – GPMorgan

Không có giải pháp tích hợp cho điều này. Bạn phải thực hiện hoạt ảnh (mờ dần) bằng cách vẽ từng khung hình riêng lẻ:

Thiết lập một số chức năng thời gian tính toán độ dốc giữa # FF0000 và màu nền và vẽ lại văn bản nhiều lần cho đến khi đạt được màu nền.

Nguồn

2012-03-29 20:40:22 stewe

Tôi nghĩ mình đã hiểu. Quên đề cập đến rằng tôi đã có một vòng lặp render và các đối tượng văn bản tự vẽ trên khung hình mỗi khung hình.

Vì vậy, giải pháp là để thêm biến alpha để các đối tượng văn bản:

this.alpha = 1;

và mỗi x khung hoặc thời gian giảm này một chút.

và render loop:

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

Nguồn

2012-03-29 20:53:17 Ixx

Fade out hiệu ứng cho văn bản trong HTML5 canvas

Trả lời

Các vấn đề liên quan