如何在javascript中向strokeStyle画布添加渐变答案

【问题标题】：How to add gradient to strokeStyle canvas in javascript如何在javascript中向strokeStyle画布添加渐变
【发布时间】：2020-04-09 13:47:40
【问题描述】：

如何在 javascript 中将渐变颜色添加到 strokeStyle 画布。请帮助我，我的代码完美运行，但问题只是我一直在尝试将渐变颜色添加到笔触样式中，但这只是破坏了我的代码。

任何可以帮助解决这个渐变色到strokeStyle的人
HTML

      <div class="countItem minutes">
        <canvas id="minutes-canvas" width="200" height="200"></canvas>
        <svg width="100%" height="100%">
            <circle id="outer" cx="50%" cy="50%" r="45%" fill="transparent" stroke-width="1%" stroke="#fff" />
        </svg>
        <h3>
            <span id="minutes-value"></span><br>
            <small>minutes</small>
        </h3>
    </div>

JAVASCRIPT

// Set Launch Date (ms)
const launchDate = new Date("May 7, 2020 00:00").getTime();

// Context object
const c = {
    context: {},
    values: {},
    times: {}
};

// Convert radians to degrees
function deg(d) {
    return (Math.PI / 180) * d - (Math.PI / 180) * 90;
}

function render() {
    c.context.minutes.clearRect(0, 0, 200, 200);
    c.context.minutes.beginPath();
    c.context.minutes.strokeStyle = "#bbee2b";
    c.context.minutes.arc(100, 100, 90, deg(0), deg(6 * (c.times.minutes - 60)));
    c.context.minutes.lineWidth = 12;
    c.context.minutes.lineCap = "round";
    c.context.minutes.stroke();

}

function init() {
    // Get 2D contexts
    c.context.minutes = document.getElementById('minutes-canvas').getContext('2d');

    // Get displayed values
    c.values.minutes = document.getElementById('minutes-value');

    setInterval(function () {
        // Get todays date and time (ms)
        const now = new Date().getTime();

        // Get distance from now to launchDate
        const distance = launchDate - now;

        // Time calculations
        c.times.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        c.values.minutes.innerText = c.times.minutes;

        render(); // Draw!
    }, 1000);
}

init();

【问题讨论】：

标签： javascript java html canvas

【解决方案1】：

您可以通过调用CanvasRenderingContext2D 的createLinearGradient 或createRadialGradient 方法来创建CanvasGradient。创建渐变后，您可以通过调用addColorStop(offset, color) 方法为其添加色标。

在您的代码中，您将CanvasRenderingContext2D 存储在c.context.minutes 中，因此您可以按照以下方式进行操作：

function render() {
    c.context.minutes.clearRect(0, 0, 200, 200);
    c.context.minutes.beginPath();

    const gradient = c.context.minutes.createLinearGradient(0,0, 200,200);
    gradient.addColorStop(0, 'red');
    gradient.addColorStop(.5, 'blue');
    gradient.addColorStop(1, 'green');
    c.context.minutes.strokeStyle = gradient;

    c.context.minutes.arc(100, 100, 90, deg(0), deg(6 * (c.times.minutes - 60)));
    c.context.minutes.lineWidth = 12;
    c.context.minutes.lineCap = "round";
    c.context.minutes.stroke();
}

参考：https://developer.mozilla.org/en-US/docs/Web/API/CanvasGradient

【讨论】：

【解决方案2】：

您可以创建渐变并将其分配给笔触

var gradient = document.getElementById('minutes-canvas').getContext('2d').createLinearGradient(0, 0, 0, 170); gradient.addColorStop(0, '#05a'); gradient.addColorStop(1, '#0a5');

// Set Launch Date (ms)
const launchDate = new Date("May 7, 2020 00:00").getTime();

// Context object
const c = {
  context: {},
  values: {},
  times: {}
};

// Convert radians to degrees
function deg(d) {
  return (Math.PI / 180) * d - (Math.PI / 180) * 90;
}

function render() {
  var gradient = document.getElementById('minutes-canvas').getContext('2d').createLinearGradient(0, 0, 0, 170);
  gradient.addColorStop(0, '#05a');
  gradient.addColorStop(1, '#0a5');


  c.context.minutes.clearRect(0, 0, 200, 200);
  c.context.minutes.beginPath();
  c.context.minutes.strokeStyle = gradient;
  c.context.minutes.arc(100, 100, 90, deg(0), deg(6 * (c.times.minutes - 60)));
  c.context.minutes.lineWidth = 12;
  c.context.minutes.lineCap = "round";
  c.context.minutes.stroke();

}

function init() {
  // Get 2D contexts
  c.context.minutes = document.getElementById('minutes-canvas').getContext('2d');

  // Get displayed values
  c.values.minutes = document.getElementById('minutes-value');

  setInterval(function() {
    // Get todays date and time (ms)
    const now = new Date().getTime();

    // Get distance from now to launchDate
    const distance = launchDate - now;

    // Time calculations
    c.times.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    c.values.minutes.innerText = c.times.minutes;

    render(); // Draw!
  }, 1000);
}

init();

<div class="countItem minutes">
  <canvas id="minutes-canvas" width="200" height="200"></canvas>
  <svg width="100%" height="100%">
            <circle id="outer" cx="50%" cy="50%" r="45%" fill="transparent" stroke-width="1%" stroke="#fff" />
        </svg>
  <h3>
    <span id="minutes-value"></span><br>
    <small>minutes</small>
  </h3>
</div>

【讨论】：

很高兴它有帮助。