Question

这个动画工作在firefox和chrome这么好但是没有工作在od边缘浏览器... 我该怎么办？解决办法是什么？请有人帮帮我非常感谢你

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
canvas.width = parseInt(getComputedStyle(canvas).width);
canvas.height = parseInt(getComputedStyle(canvas).height);

var P = 4;
var A = 4;

function draw(shift) {
   var w = canvas.width;
   var h = canvas.height;
   shift = shift >= 500*Math.PI ? shift - 100*Math.PI : shift;
   ctx.clearRect(0, 0, w, h);
   var grd = ctx.createLinearGradient(0, 0, w, h);
   grd.addColorStop(0, "#4a8bf5");
   grd.addColorStop(1, "#f16b55");
   ctx.strokeStyle = grd;

   ctx.lineCap = "round";
   for (var i = 0; i < w; ) {
      var _A = Math.abs(A*Math.cos(2*i));
      ctx.beginPath();
      var pos = Math.exp(-_A * i / w) * Math.sin(P * Math.PI * (i + shift) / w);
      pos *= h / 2;
      var lw = Math.exp(-_A * i / w) * Math.sin(3 * Math.PI * (i - shift) / w) * 2;
      ctx.lineWidth = (lw)+1;
      ctx.lineTo(i, h / 2 - pos);
      ctx.closePath();
      ctx.stroke();
      i += 1;
   }

   window.requestAnimationFrame(() => {
      draw(shift + 1);
   });
}
draw(0);

canvas {
background:black;
}

<canvas id="canvas"></canvas>

Answer 1

您首先需要从requestAnimationFrame()中删除ES6语法才能在IE中使用。

下一个问题是有closePath()在行动。如果没有使用moveTo()和/或结果点正好位于彼此之上，这将使IE / Edge变得怪异。

但解决方法很简单：删除closePath()（点或行不需要），并为每个子路径使用moveTo()和lineTo()。此外，您必须在其中一个调用中偏移x或y，因此该点在顶部不准确。

我还建议移动beginPath()和stroke()以及循环外部的所有静态内容。这将提高性能。

修改后的代码（带有修改后的循环代码）：

＆＃13;

var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
// these make no sense here btw:
//canvas.width = parseInt(getComputedStyle(canvas).width);
//canvas.height = parseInt(getComputedStyle(canvas).height);

var P = 4;
var A = 4;

// move all these outside the loop (reinvoke if size of canvas changes)
var w = canvas.width;
var h = canvas.height;
var grd = ctx.createLinearGradient(0, 0, w, 0);
grd.addColorStop(0, "#4a8bf5");
grd.addColorStop(1, "#f16b55");
ctx.strokeStyle = grd;
ctx.lineCap = "round";

function draw(shift) {
   shift = shift >= 500*Math.PI ? shift - 100*Math.PI : shift;
   ctx.clearRect(0, 0, w, h);
   ctx.beginPath();  // outside iteration
   for (var i = 0, _A, pos, lw; i < w; ) {
      _A = Math.abs(A*Math.cos(2*i));
      pos = Math.exp(-_A * i / w) * Math.sin(P * Math.PI * (i + shift) / w);
      pos *= h * 0.5;
      lw = Math.exp(-_A * i / w) * Math.sin(3 * Math.PI * (i - shift) / w) * 2;
      ctx.lineWidth = lw + 1;

      // IE/Edge needs a first moveTo(). Creates a sub-path
      ctx.moveTo(i, h * 0.5 - pos);

      ctx.lineTo(i + 1, h * 0.5 - pos);  // offset x or y slightly
      i += 1;
   }
   ctx.stroke();  // fill all a single  time

   // IE don't support ES6 syntax
   window.requestAnimationFrame(function() {
      draw(shift + 1);
   });
}
draw(0);

＆＃13;

canvas {
background:black;
}

＆＃13;

<canvas id="canvas"></canvas>

＆＃13;

Answer 2

你能用你的element.getBoundingClientRect().transform.width尝试吗。有时候window.getComputedStyle会为不同的浏览器返回不同的值。

画布动画不在ie中工作

2 个答案: