如何在 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 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();

Answer 1

您可以通过调用的CanvasGradient方法createLinearGradient或来创建. 创建渐变后，您可以通过调用 方法向其添加色标。createRadialGradientCanvasRenderingContext2DaddColorStop(offset, color)在您的代码中，您存储CanvasRenderingContext2Din c.context.minutes，因此您可以按照以下方式执行操作：function render() {&nbsp; &nbsp; c.context.minutes.clearRect(0, 0, 200, 200);&nbsp; &nbsp; c.context.minutes.beginPath();&nbsp; &nbsp; const gradient = c.context.minutes.createLinearGradient(0,0, 200,200);&nbsp; &nbsp; gradient.addColorStop(0, 'red');&nbsp; &nbsp; gradient.addColorStop(.5, 'blue');&nbsp; &nbsp; gradient.addColorStop(1, 'green');&nbsp; &nbsp; c.context.minutes.strokeStyle = gradient;&nbsp; &nbsp; c.context.minutes.arc(100, 100, 90, deg(0), deg(6 * (c.times.minutes - 60)));&nbsp; &nbsp; c.context.minutes.lineWidth = 12;&nbsp; &nbsp; c.context.minutes.lineCap = "round";&nbsp; &nbsp; 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);&nbsp; gradient.addColorStop(0, '#05a');&nbsp; gradient.addColorStop(1, '#0a5');// Set Launch Date (ms)const launchDate = new Date("May 7, 2020 00:00").getTime();// Context objectconst c = {&nbsp; context: {},&nbsp; values: {},&nbsp; times: {}};// Convert radians to degreesfunction deg(d) {&nbsp; return (Math.PI / 180) * d - (Math.PI / 180) * 90;}function render() {&nbsp; var gradient = document.getElementById('minutes-canvas').getContext('2d').createLinearGradient(0, 0, 0, 170);&nbsp; gradient.addColorStop(0, '#05a');&nbsp; gradient.addColorStop(1, '#0a5');&nbsp; c.context.minutes.clearRect(0, 0, 200, 200);&nbsp; c.context.minutes.beginPath();&nbsp; c.context.minutes.strokeStyle = gradient;&nbsp; c.context.minutes.arc(100, 100, 90, deg(0), deg(6 * (c.times.minutes - 60)));&nbsp; c.context.minutes.lineWidth = 12;&nbsp; c.context.minutes.lineCap = "round";&nbsp; c.context.minutes.stroke();}function init() {&nbsp; // Get 2D contexts&nbsp; c.context.minutes = document.getElementById('minutes-canvas').getContext('2d');&nbsp; // Get displayed values&nbsp; c.values.minutes = document.getElementById('minutes-value');&nbsp; setInterval(function() {&nbsp; &nbsp; // Get todays date and time (ms)&nbsp; &nbsp; const now = new Date().getTime();&nbsp; &nbsp; // Get distance from now to launchDate&nbsp; &nbsp; const distance = launchDate - now;&nbsp; &nbsp; // Time calculations&nbsp; &nbsp; c.times.minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));&nbsp; &nbsp; c.values.minutes.innerText = c.times.minutes;&nbsp; &nbsp; render(); // Draw!&nbsp; }, 1000);}init();<div class="countItem minutes">&nbsp; <canvas id="minutes-canvas" width="200" height="200"></canvas>&nbsp; <svg width="100%" height="100%">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <circle id="outer" cx="50%" cy="50%" r="45%" fill="transparent" stroke-width="1%" stroke="#fff" />&nbsp; &nbsp; &nbsp; &nbsp; </svg>&nbsp; <h3>&nbsp; &nbsp; <span id="minutes-value"></span><br>&nbsp; &nbsp; <small>minutes</small>&nbsp; </h3></div>