HTML5 canvas in android problem

Question

캔버스로 그라디언트 텍스트를 만들고 싶습니다. 내 PC가 코드를 올바르게 렌더링하지만, 안드로이드는 그 안에 텍스트가있는 일반 그래디언트처럼 표시합니다. 가능한 경우이 문제를 어떻게 해결할 수 있습니까?

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의 그래디언트가 아직 안드로이드 브라우저에 구현되어 있지 않습니다. 이것을 쓰는 경우 :

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) 

텍스트와 직사각형에 모두 그라데이션이 표시됩니다.

See it live here.

그러나 안드로이드 장치에서 텍스트는 빨간색으로 표시되고 rect는 그라디언트가됩니다!

크롬 자체는 사양 작성자 (그 자신이 Google 직원)가 레이아웃 한 모든 캔버스 그래디언트 사례를 여전히 완벽하게 지원하지 않습니다. 나는 그것에 관한 버그 보고서를 제출했다 here.