excanvas++ の続き

線形グラデーション(createLinearGradient)の角度(angle)がうまく指定できない問題と戦っていました。

var grad = ctx.createLinearGradient(0, 0, 80, 40); は幅80,高さ40の線形グラデーションを生成します。ここで x0 = 0, y0 = 0, x1 = 80, y1 = 40 とします。

傾きからVML用の角度(radianじゃなくdegree)を求めるには、
var deg = Math.atan2(x1 - x0, y1 - y0) * 180 / Math.PI; としますが、描画されるグラデーションの角度が変です。

ジミな試行錯誤の結果、バイアスをかけた値(45→45, 21→9, 16→4, 8→1, 0→0)を指定すると、Safariと同じ描画結果になるようです。

幅と高さを二乗(pow2)すると、
var deg = Math.atan2(Math.pow(x1 - x0, 2), Math.pow(y1 - y0, 2)) * 180 / Math.PI;

このように描画されます。これが正解のようです。