畫布漸變在它應該是垂直的時候是對角線

我有一些 javascript 代碼可以從 14 種顏色生成漸變：

var example = document.getElementById('example');
var context = example.getContext('2d');

var grdBnds = [0, 0, 200, 30]
var grd = context.createLinearGradient(grdBnds[0], grdBnds[1], grdBnds[2], grdBnds[3]);
grd.addColorStop((1/14)*0, "rgb(0, 0, 0)");
grd.addColorStop((1/14)*1, "rgb(191, 191, 191)");
grd.addColorStop((1/14)*2, "rgb(115, 115, 115)");
grd.addColorStop((1/14)*3, "rgb(245, 182, 181)");
grd.addColorStop((1/14)*4, "rgb(147, 252, 253)");
grd.addColorStop((1/14)*5, "rgb(87, 120, 246)");
grd.addColorStop((1/14)*6, "rgb(177, 251, 162)");
grd.addColorStop((1/14)*7, "rgb(80, 176, 51)");
grd.addColorStop((1/14)*8, "rgb(230, 230, 75)");
grd.addColorStop((1/14)*9, "rgb(187, 109, 93)");
grd.addColorStop((1/14)*10, "rgb(235, 51, 35)");
grd.addColorStop((1/14)*11, "rgb(188, 39, 246)");
grd.addColorStop((1/14)*12, "rgb(117, 20, 124)");
grd.addColorStop((1/14)*13, "rgb(191, 191, 191)");

context.fillStyle = grd;
context.fillRect(grdBnds[0], grdBnds[1], grdBnds[2], grdBnds[3]);

<canvas id="example" width="1000" height="400"></canvas>

正如你所看到的，漸變線是在對角線的右邊生成的，而它們應該是垂直的。

有誰知道為什么會這樣，我該如何解決？

我知道您也可以使用 CSS 制作漸變，但對于我正在做的事情，我需要使用canvas.

uj5u.com熱心網友回復：

createLinearGradient和的引數fillRect是兩個不同的東西。

var example = document.getElementById('example');
var context = example.getContext('2d');

var grdBnds = [0, 0, 000, 240]
var rectBnds = [0, 0, 360, 240]
var grd = context.createLinearGradient(grdBnds[0], grdBnds[1], grdBnds[2], grdBnds[3]);
grd.addColorStop((1 / 14) * 0, "rgb(0, 0, 0)");
grd.addColorStop((1 / 14) * 1, "rgb(191, 191, 191)");
grd.addColorStop((1 / 14) * 2, "rgb(115, 115, 115)");
grd.addColorStop((1 / 14) * 3, "rgb(245, 182, 181)");
grd.addColorStop((1 / 14) * 4, "rgb(147, 252, 253)");
grd.addColorStop((1 / 14) * 5, "rgb(87, 120, 246)");
grd.addColorStop((1 / 14) * 6, "rgb(177, 251, 162)");
grd.addColorStop((1 / 14) * 7, "rgb(80, 176, 51)");
grd.addColorStop((1 / 14) * 8, "rgb(230, 230, 75)");
grd.addColorStop((1 / 14) * 9, "rgb(187, 109, 93)");
grd.addColorStop((1 / 14) * 10, "rgb(235, 51, 35)");
grd.addColorStop((1 / 14) * 11, "rgb(188, 39, 246)");
grd.addColorStop((1 / 14) * 12, "rgb(117, 20, 124)");
grd.addColorStop((1 / 14) * 13, "rgb(191, 191, 191)");

context.fillStyle = grd;
context.fillRect(rectBnds[0], rectBnds[1], rectBnds[2], rectBnds[3]);

<canvas id="example" width="1000" height="400"></canvas>

uj5u.com熱心網友回復：

createLinearGradient從 2 個點 (x0,y0) 和 (x1, y1) 生成漸變，這就是它采用四個引數的原因。

fillStyle定義fillRect用來填充矩形的顏色、漸變或圖案。你在這里使用漸變。

fillRect 取四個引數。x，y，寬度，高度。

這是一個使用畫布尺寸設定不同引數的片段。

var canvas = document.getElementById('example');
var context = canvas.getContext('2d');

var colors = [
    "rgb(0, 0, 0)",
    "rgb(191, 191, 191)",
    "rgb(115, 115, 115)",
    "rgb(245, 182, 181)",
    "rgb(147, 252, 253)",
    "rgb(87, 120, 246)",
    "rgb(177, 251, 162)",
    "rgb(80, 176, 51)",
    "rgb(230, 230, 75)",
    "rgb(187, 109, 93)",
    "rgb(235, 51, 35)",
    "rgb(188, 39, 246)",
    "rgb(117, 20, 124)",
    "rgb(191, 191, 191)"
];

// Horizontally
var grd = context.createLinearGradient(0, 0, canvas.width, 0);

// Vertically
var grd = context.createLinearGradient(0, 0, 0, canvas.height);

for (let index = 0; index < colors.length; index  ) {
    const color = colors[index];
    grd.addColorStop(index/colors.length, color);
}

context.fillStyle = grd;
context.fillRect(0, 0, canvas.width, canvas.height);

<canvas id="example" width="1000" height="400"></canvas>

標籤：javascript html 帆布 html5-画布 坡度

上一篇：我在使用此專案網站的查詢選擇器時遇到問題

下一篇：條件ifelse向我顯示結果。這是怎么回事？