Question

我正在使用canvas元素与text一起绘制曲线。它在chrome，Firefox，IE 9中运行良好。但在IE 8,7中这不起作用。显示错误如：

SCRIPT438：Object不支持属性或方法'getContext'

以下IE 9版本。

我在Google搜索，然后我发现Excanvas.js会发现此问题，但没有使用excanvas.js，但我仍然遇到同样的错误。

请帮帮我。

谢谢。

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

`

我的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();

Answer 1

只有在文档准备就绪时才需要运行JS。

对于支持<canvas>的浏览器，这可能不是必需的，但对于IE＆lt; 9，excanvas.js在文档加载后工作，因此您需要在运行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); }

SCRIPT438：对象不支持IE 9以下版本中的属性或方法'getContext'

1 个答案: