相對於形狀位置的漸變填充，而不是畫布位置？

Question

據我了解，漸變填充必須相對於canvas元素本身（即0,0）指定，而不是相對於您實際填充的形狀。

問題： 我對這個斷言是否正確，是否有建議的方法？

例如（ 這里是JSFiddle ）：

    ctx.beginPath();
    ctx.rect(40, 50, 100, 70);
    var grd = ctx.createLinearGradient(0, 50, 0, 120);
    grd.addColorStop(0, "red");
    grd.addColorStop(1, "blue");
    ctx.fillStyle = grd;
    ctx.fill();

在那里，我做了一個矩形。 我希望，從形狀的左上角開始用漸變填充它，我將傳遞0, 0作為前兩個參數。 看來我必須傳遞相對於畫布的矩形的X / Y坐標。

如果你有一個用二次曲線構建的弧，這就成了一個問題，因為，如果不是數學天才，你不知道曲線的頂部位置 - 只有控制點。

Answer 1

如果你不知道你正在繪制的形狀的邊界，你將會有一個糟糕的時間。

如果您正在使用漸變，尤其是重新使用漸變，則最好始終從原點創建漸變和形狀，並將它們轉換為它們將要到達的位置。

設置這種類型的系統將使定義漸變或多或少相對於對象的大小，但您仍然必須自己進行邊界計算。

這是一個翻譯漸變和形狀以使其與畫布“相對”的示例：

http://jsfiddle.net/simonsarris/RFgcs/