在android問題中的HTML5畫布

Question

我想用畫布製作漸變文字，而我的電腦呈現代碼正確，但android會像正常漸變一樣將其顯示爲正常漸變。如果可能，我該如何解決這個問題？
這裏的JavaScript：

function text() { 
var canvas = document.getElementById('header-text'); 
var ctx = canvas.getContext('2d'); 
var gradient = ctx.createLinearGradient(0, 0, 0, 29); 
gradient.addColorStop(0, "#fcfcfc"); 
gradient.addColorStop(1, "#ccc"); 
ctx.font = "bold 29px helvetica, arial, sans-serif"; 
ctx.shadowColor = "#232323"; 
ctx.shadowOffsetX = 2; 
ctx.shadowOffsetY = 2; 
ctx.shadowBlur = 2; 
ctx.fillStyle = gradient; 
ctx.fillText("Company name", 0, 23); 
} 

Answer 1

遺憾地說，這是一個錯誤。

或者，fillText的漸變尚未在android瀏覽器上實現。如果你這樣寫：

var gradient = ctx.createLinearGradient(0, 0, 0, 29); 
gradient.addColorStop(0, "#fcfcfc"); 
gradient.addColorStop(1, "#ccc"); 
ctx.fillStyle = 'red'; 
ctx.fillStyle = gradient; // replace the fillstyle with a gradient 
ctx.fillText("Testing", 0, 23); 
ctx.fillRect(0,0,20,20) 

你會看到文本和矩形在Chrome中都有漸變。

See it live here。

但在Android設備上，文字將是紅色的，並且矩形將是漸變！

Chrome本身仍然沒有完全支持規範作者（他自己是Google員工）制定的所有畫布漸變情況。我提交了一個關於它的錯誤報告here。