5

I am using canvas element to draw curve along with text. It is working fine in chrome, Firefox, IE 9. But in IE 8,7 this is not working. Showing the error like:

SCRIPT438: Object doesn't support property or method 'getContext'

I searched in Google then i found Excanvas.js will figure out this problem, but I am getting the same error.

Thank you.

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

My html canvas code:

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

My js code:

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

5

仅当文档准备好时才需要运行 JS。

对于支持.<canvas> _ excanvas.js_

将您的 JS 更改为：

function drawTextAlongArc()
{
    /* ... */
}
function onLoad()
{
    var canvas=document.getElementById("myCanvas"),
        context=canvas.getContext("2d");
    /* ... */
}
if(window.addEventListener)
{
    window.addEventListener("load",onLoad,false);
}
else if(window.attachEvent)
{
    window.attachEvent("onload",onLoad);
}
于 2013-04-29T10:08:42.990 回答