如何在 javascript 中向 borderStyle 画布添加渐变

Question

如何在 javascript 中向描边样式画布添加渐变颜色。请帮助我，我的代码工作完美，但问题只是我一直在尝试向笔划样式添加渐变颜色，但它只是破坏了我的代码。任何可以帮助解决此渐变颜色到描边样式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>脚本语言// Set Launch Date (ms)const launchDate = new Date("May 7, 2020 00:00").getTime();// Context objectconst c = {    context: {},    values: {},    times: {}};// Convert radians to degreesfunction 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();

Answer 1

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

在您的代码中，您存储CanvasRenderingContext2Din 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

Answer 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>