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

據我所知，梯度填充必須相對於畫布元素本身（即0,0）指定，而不是相對於實際填充的形狀。相對於形狀位置的漸變填充，而不是畫布位置？

問題：我在這個斷言中是否正確，是否有一個建議的解決方法？

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座標。

如果比方說你有一個二次曲線，那麼這就成了一個問題，因爲如果不是數學天才，你不知道曲線的頂部位置 - 只有控制點。

來源

2012-08-11 Utkanos

如果你不知道你正在繪製的形狀的邊界，你會有一個不好的時間。

如果您使用漸變，尤其是重新使用漸變，最好始終從原點製作漸變和形狀，並將它們轉換爲它們將要使用的位置。

建立這樣的系統將使得定義漸變相對於對象的大小更多或更少，但是您仍然必須自己進行邊界計算。

這裏的平移梯度的例子和形狀，使其「相對」畫布：

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

來源

2012-08-11 21:09:24

+1的幫助。但是二次曲線的情況是你不知道邊界（即曲線的頂點）的情況。我試圖找到今天的數學公式，但失敗了。 – Utkanos 2012-08-12 08:49:55

@Utkanos任何方程的全部點是給定一個數字x，你可以找到滿足解的另一個數。所以，y =（x-2）^ 2 + 4很容易解決。比方說，x是2，那麼你只需4就可以得到y。所以，如果你有一個由某個函數定義的二次拋物線，那麼你可以很容易地在該曲線上生成點。例如，如果你運行了'for（var i = 0，len = whatever.width; i dylnmc 2017-07-05 18:03:52

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

回答

相關問題