Html5 canvas HTML5标签在IE9/10中不起作用
我有一个简单的canvas标记，并试图将其用作我的项目的图形绘制区域。下面是代码Html5 canvas HTML5标签在IE9/10中不起作用,html5-canvas,Html5 Canvas,我有一个简单的canvas标记，并试图将其用作我的项目的图形绘制区域。下面是代码 <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body> <canvas id="canva
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<canvas id="canvas" width="1600" height="160" style="background-image: url(ecg_back.png); style="background-color: black;"></canvas>
<script type='text/javascript'>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#dbbd7a";
ctx.fill();
var fps = 60;
var n = 1;
var data = [
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 20, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82,
148, 149, 149, 150, 150, 150, 143, 82, 82, 82, 82, 82, 82, 82];
drawWave();
function drawWave() {
setTimeout(function() {
requestAnimationFrame(drawWave);
ctx.lineWidth = "1";
ctx.strokeStyle = 'green';
// Drawing code goes here
n += 1;
if (n >= data.length) {
n = 1;
}
ctx.beginPath();
ctx.moveTo(n - 1, data[n - 1]);
ctx.lineTo(n, data[n]);
ctx.stroke();
ctx.clearRect(n+1, 0, 10, canvas.height);
}, 1000 / fps);
}
</script>
</body>
IE9没有内置requestAnimationFrame
您可以使用polyfill添加该功能。以下是Paul Irish提供的最佳垫片：
只需将此polyfill置于代码的其余部分之上：
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
//http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
//Erik Möller的requestAnimationFrame polyfill。来自Paul Irish和Tino Zijdel的修复
//麻省理工学院执照
（功能（）{
var lastTime=0；
var供应商=['ms'，'moz'，'webkit'，'o']；
对于（var x=0；x
IE10对你来说应该很好。在IE10仿真模式下，您的示例对我来说很好
祝你的项目好运 尝试移动drawWave（）函数实现后的函数调用（在函数实现下）。IE javascript控制台是否显示任何错误？移动了函数调用，仍然不走运。你是对的@markE，但我的目标浏览器是IE9。在你提到的链接中，有太多的代码让我更加困惑。请给我一些代码片段好吗？很抱歉问得更多！没问题。我在回答中加入了保罗·爱尔兰的polyfill代码。只需将polyfill代码放在您的代码之上，IE9就会有requestAnimationFrame。干杯