2013-05-15 176 views
2

在下面的代碼中,我通過傳遞字符串來更改html canvas 5字體。然後在第二種情況下,我使用數組和變量。第一個案件起作用。第二種情況不會更改字體。問題可能是我構造變量的方式。javascript變量 - html5畫布問題

<!DOCTYPE HTML> 
<html> 

    <body> 
     <canvas id="myCanvas" width="800" height="600"></canvas> 
    <script> 

    // array of fonts 
    var fontArray = new Array();  
    fontArray.push("Antiqua");    
    fontArray.push("Arial"); 
    fontArray.push("Comic Sans");  

    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 

    // This works 
    context.font = "25pt Arial"; 
    context.fillText('This works ', 30, 30);    
    context.font = "25pt Monospace"; 
    context.fillText('This works ', 30, 80);    


    // This works but shows no varaition of font 
    for(x=0;x<3;x++){ 
     var fontText = "\'" + "20pt " + fontArray[x] + "\'" ;   
     context.font = fontText; 
     console.log(fontText); // print to console 
     context.fillText('This works but shows no variation of font', 120, 140+(x*50));    
    } 


    </script> 
+1

沒有必要爲逃脫單引號。 –

回答

1

如果你改變什麼:

var fontText = "\'" + "20pt " + fontArray[x] + "\'" ;

var fontText = "20pt " + fontArray[x];

0

您不應該將字體字符串換成單引號。遠程,它應該工作。

var fontText = "20pt " + fontArray[x];   

jsFiddle

另一個原因是字體可能在客戶端上不可用。