奇怪的畫布旋轉歌劇院

我寫死了簡單的繪圖用帆布：奇怪的畫布旋轉歌劇院

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度旋轉的橢圓形扁平，但......不是在歌劇。我也嘗試明確rotate，它也不起作用。在Chrome和FF中一切正常。我做錯了什麼？有沒有解決方法？

來源

2012-10-11 meandre

你在Opera中看到什麼？一點都沒有？你的例子完全缺乏分號。這是真的對你的實際測試文件？ – Steve

Opera只是將圓圈延伸到橢圓而不會使其偏斜。缺少的分號絕對不是問題 - 雖然這不是好的做法...;） – Aletheios

@Steve，我從不在Javascript中添加分號，因爲它們不是必需的。這是[關於此的一篇文章]（http://mislav.uniqpath.com/2010/05/semicolons/）。 – meandre

我的第一種方法是用畫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有2個原因，它不會工作：

Opera的arcTo()要求略有不同點作爲參數=）
它仍然變換矩陣不適用於生成的路徑。

所以我被迫使用一種變通方法繪製使用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-12 10:58:28 meandre

它看起來像Opera中的一個bug。如果你看看我的http://jsfiddle.net/a6anq/5/這個網格在Chrome和Opera中都可以正確翻譯，但是橢圓不是。看起來Opera在運行arc（）時沒有考慮到轉換。

來源

2012-10-11 23:14:15 Steve

非常感謝，我現在檢查它是如何工作的'arcTo（）'。 – meandre

奇怪的畫布旋轉歌劇院

回答

相關問題