1

我用画布写了简单的绘图：

var angle = 20
var k = Math.sin(Math.PI / 180 * angle)
var scaleY = 0.5
var radius = 55
var pushBy = {x: 60, y: 60}

var drawArc = function (context) {
  context.setTransform(1, -k, 0, scaleY, pushBy.x, pushBy.y)
  context.beginPath()
  context.arc(0, 0, radius, 0, Math.PI * 2)
  context.stroke()
}

var canvas = $('canvas')
var context = canvas.getContext('2d')

drawArc(context)

实际上，它完全符合我的需要：它绘制了一个旋转了 20 度的扁平椭圆，但是......不是在 Opera 中。我也试过rotate了，它也不起作用。在 Chrome 和 FF 中一切正常。难道我做错了什么？有什么解决方法吗？

4

2 回答 2

2

它看起来像 Opera 中的一个错误。如果你看一下我的http://jsfiddle.net/a6anq/5/，网格在 Chrome 和 Opera 中都正确翻译，但椭圆不是。运行 arc() 时，Opera 似乎没有考虑转换。

于 2012-10-11T23:14:15.917 回答
1

我的第一种方法是使用 绘制四个弧线arcTo()，我错误地认为这是通用的解决方法 =) 这是代码

var drawArcWith4ArcTo = function (context) {
  context.setTransform(1, -k, 0, scaleY, pushBy.x, pushBy.y)
  context.beginPath()
  context.moveTo(-radius, 0)
  context.lineTo(-radius, 0)
  context.arcTo(-radius, radius, 0, radius, radius)
  context.arcTo(radius, radius, radius, 0, radius)
  context.arcTo(radius, -radius, 0, -radius, radius)
  context.arcTo(-radius, -radius, -radius, 0, radius)
  context.stroke()
}

但它在 Opera 中不起作用，原因有两个：

  • OperaarcTo()需要稍微不同的点作为参数 =)
  • 它仍然没有将变换矩阵应用于结果路径。

所以我被迫使用一种解决方法，使用 4 条贝塞尔曲线画一个圆：

var drawArcWith4BezierCurves = function () {
  var kappa = 4 * (Math.sqrt(2) - 1) / 3

  return function (context) {
    context.setTransform(1, -k, 0, scaleY, pushBy.x, pushBy.y)
    context.beginPath()
    context.moveTo(-radius, 0)
    context.bezierCurveTo(
      -radius, radius * kappa,
      -radius * kappa, radius,
      0, radius
    )
    context.bezierCurveTo(
      radius * kappa, radius,
      radius, radius * kappa,
      radius, 0
    )
    context.bezierCurveTo(
      radius, -radius * kappa,
      radius * kappa, -radius,
      0, -radius
    )
    context.bezierCurveTo(
      -radius * kappa, -radius,
      -radius, -radius * kappa,
      -radius, 0
    )
    context.stroke()
  }
}

if (Prototype.Browser.Opera)
  drawArc = drawArcWith4BezierCurves()

两个注意事项：

  • 结果路径是一个近似值，而不是一个绝对圆（怀疑你是否会注意到这个=）
  • 该示例使用了一些 Prototype.js，但很容易猜到我的意思。
于 2012-10-12T10:58:28.823 回答