将画布的2D背景精确旋转180度

时间:2015-07-09 02:00:30

标签: canvas matrix html5-canvas

将画布的2D上下文旋转180度(PI弧度)后,变换矩阵的a-d分量如下:

{
    a: -0.9999999999999962,
    b: -8.742278000372475e-8,
    c: 8.742278000372475e-8,
    d: -0.9999999999999962
}

预期值为:

{
    a: -1,
    b: 0,
    c: 0,
    d: -1
}

我认为由于使用了Math.PI,这是一个舍入错误。我想这是准确的,因为如果转换值不是整数,则后续转换将不是整个像素。出于性能原因,我想避免浏览器不得不做半像素的抗锯齿。

通过获取和设置context.currentTransform,我不可能在事后对这些值进行舍入,因为应用程序将在iPad上的webview中运行,据我所知,这是不受支持的。

是否有人知道如何实现以下任何一种方法:

  1. 正确旋转上下文180度而没有舍入错误
  2. 设置变换矩阵的a-d值而不影响e和f值(不含context.currentTransform)
  3. 强制画布不使用消除锯齿
  4. 以上任何一项都可以解决我的问题。其他建议也欢迎。

0 个答案:

没有答案