5

キャンバス要素を使用して、テキストとともに曲線を描画しています。Chrome、Firefox、IE 9 では正常に動作していますが、IE 8,7 では動作しません。次のようなエラーを表示します。

SCRIPT438: オブジェクトはプロパティまたはメソッド 'getContext' をサポートしていません

Google で検索したところ、Excanvas.jsこの問題を解決できることがわかりましたが、同じエラーが発生しています。

ありがとうございました。

<head><!--[if IE]><script src="js/excanvas.js"></script><![endif]--></head>

私のHTMLキャンバスコード:

<canvas id="myCanvas" width="679" height="290"></canvas>

私のjsコード:

function drawTextAlongArc(context, str, centerX, centerY, radius, angle) {
    var len = str.length, s;

    context.save();            
    context.translate(centerX, centerY);            
    context.rotate(-1 * angle / 2);            
    context.rotate(-1 * (angle / len) / 2);            

    for(var n = 0; n < len; n++) {              
       context.rotate(angle / len);        
       context.save();
       context.translate(0, -1 * radius);

       s = str[n];              
       context.fillText(s, 0, 0);        
       context.restore();
    }    
    context.restore();
}

var canvas = document.getElementById('myCanvas'),             
    context = canvas.getContext('2d'),            
    centerX = canvas.width / 2,            
    centerY = canvas.height + 40,            
    angle = Math.PI * 0.8,            
    radius = 250;          

context.font = 'bold 30pt Ubuntu'; 
context.textAlign = 'center';
context.fillStyle = 'orange';
context.strokeStyle = '#336699';
context.lineWidth = 10;

drawTextAlongArc(context, 'Sustainable Skill Solutions', centerX, centerY, radius, angle);


// draw circle underneath text
context.arc(centerX, centerY, radius +70, 0, 2 * Math.PI, false);
context.stroke();
4

1 に答える 1