Canvas 在画布上绘制图像时，图像将丢失webkit转换

我将webkit转换应用于img，然后我想将该图像绘制到画布上。当我应用代码时，图像显示转换，但画布显示的图像与转换之前的图像一样。。。有什么想法吗提前谢谢

          var canvas = document.getElementById("myCanvas");
          var context = canvas.getContext("2d"); 
          var wrkimg = document.getElementById("workingimg");

          wrkimg.onload = function()
                {
                   $(this).css('-webkit-transform', 'rotate(162deg)  scale(1,1) scaleX(1)');    
                   context.drawImage(wrkimg, 50, 50);                
                 }

          wrkimg.src = 'Appimages/Head1.png';

---

在画布上绘制图像时，不会使用任何webkit/CSS转换来绘制图像。你只需要画一幅普通的老照片

但是，您可以将变换应用于画布上下文本身，然后绘制图像

请注意，这与对画布应用任何类型的变换不同。只是画布上下文

因此，您需要调用

context.rotate

context.rotate(162 * (Math.PI/180)); // works in radians so we gotta convert
context.drawImage(wrkimg, 50, 50);

请注意，这里缺少一个步骤。当你变换一个上下文时，你总是通过上下文的左上角进行变换，所以通常你必须结合平移和旋转来得到你想要的

---

下面是一个使用画布上下文围绕其中心旋转的图像示例：

我们找到了问题的解决方案。我的同事Nikola Chakurov发现了一个名为Html2Canvas的新版本的库。发布版本是0.5.0-rc1，它非常适合与旋转相关的问题。这是解决我们问题的一个环节：

---

我想提到的是，Html2Canvas版本0.5.0-rc1的代码看起来非常干净和漂亮。向我竖起大拇指。

谢谢西蒙，这可以很好地解释为什么什么都不管用。。提姆