如何在 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();
2 回答
長風秋雁
TA貢獻1757條經驗 獲得超7個贊
您可以通過調用的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
冉冉說
TA貢獻1877條經驗 獲得超1個贊
您可以創建漸變并將其指定給描邊
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>
- 2 回答
- 0 關注
- 173 瀏覽
添加回答
舉報
0/150
提交
取消