Canvas 如何在画布中旋转渐变，注意：不是画布本身

我试过旋转画布，包括变换和翻译，但效果不好

grad=ctx.createRadialGradient（x1，y1,0，x1，y1，Math.pow（（x1-x2）**2+（y1-y2）**2,0.5））//动态创建radialGradient
对于（设i=0；i

根据您的评论

我想动态更改径向渐变的形状

下面是一个示例，说明如何做到这一点

…只是一点关于圆圈位置的乐趣

let canvas=document.getElementById（“canvas”）；
设ctx=canvas.getContext（“2d”）；
渐变列表=[“红色”、“蓝色”、“青色”、“绿色”]
圆圈1={x:canvas.width/2，y:canvas.height/2，r:10}
圆圈2={x:canvas.width/2，y:canvas.height/2，r:100}
i=0
函数绘图（）{
i+=0.1
dx=数学sin（i）*35
dy=数学cos（i）*20
梯度=ctx.createRadialGradient(
圆圈1.x-dx，圆圈1.y-dy，圆圈1.r，
circle2.x+dx，circle2.y+dy，circle2.r+Math.abs（dx）
) 
对于（设i=0；i
有关于您所取得成就的代码吗？是的，请提供一个示例（而不是图片链接），说明您正在尝试做什么，并尽可能具体地说明您遇到的任何问题。您所问的问题非常不清楚。径向梯度是圆形的。旋转它并不意味着什么。要获得所显示的图像，需要在某个点上应用缩放（在您的上下文中是最佳情况，在CSS中是最坏情况？）。你能确切地说明你真正拥有什么和你想要什么吗？我想动态地改变径向梯度的形状，包括改变圆的长半径和短半径，以及改变梯度的角度哇，认真的回答，非常感谢！但正如你所说，我想要的是一个椭圆。虽然你的代码很棒，但它不是我想要的。我会去fabricjs看的，再次谢谢。@Sword我正在看他们是如何在fabricjs上做的，他们只是在使用SVG图像，我用一个示例更新了我的答案，我刚刚看到了。很好的解决方案，让我试试！但是我有点担心性能问题，不管怎样，谢谢你的严格回答！！
  grad = ctx.createRadialGradient(x1,y1,0,x1,y1,Math.pow((x1-x2)**2 + (y1-y2)**2,0.5))    //create radialGradient dynamically
  for (let i = 0; i < gradientList.length; i++) {        //Add colorStop dynamically
    grad.addColorStop(gradientList[i].point / 100, gradientList[i].color)
  }
  ctx.fillStyle = grad;
  ctx.rect(0, 0, w, h)          //draw a rect
  ctx.translate(w/2, h/2);           //and then... I dont know how to rotate
  ctx.rotate(Math.atan2(-x2+x1,y2-y1)/Math.PI);
  ctx.fill()
  ctx.rotate(-Math.atan2(-x2+x1,y2-y1)/Math.PI);
  ctx.translate(-w/2, -h/2);