时间戳

首页 > 解决方案 > 使画布圈变大

html - 使画布圈变大

问题描述

我是使用 canvas html 标记的新手，并且在我的网站上放了一个倒计时，该网站使用我认为可以制作圆圈的画布标记，它可以正常工作，但想让圆圈变大但不知道该怎么做，我得到了来自https://codepen.io/mdkroon/pen/dBweaL的编码，下面是我目前拥有的编码。我不知道如何使圆圈变大，我可以使字体变大，但文本不适合圆圈。

<div id="countdown" data-date="2020-01-14" data-time="12:00:00">
<p><strong>Windows 7 End of Life Countdown</strong></p>
<div class="canvas-container" >
<canvas id="days"></canvas>
<canvas id="hours"></canvas>
<canvas id="minutes"></canvas>
<canvas id="seconds"></canvas>
</div>
</div>

<script>  
// variables
var countdown = document.getElementById('countdown');
var endDate = countdown.dataset.date || '2020-01-14';
var endTime = countdown.dataset.time || '00:00:00';
var endCountdown = new Date(endDate + 'T' + endTime);
var timer;
var specs = {
'radius': 50,
'centerX': 50,
'centerY': 50,
'thickness': 10,
'offset': -Math.PI/2,
'color': '#1abc9c',
'bgColor': '#ccc',
'idFont': 'small-caps 400 10px Verdana',
'valueFont': 'bold 30px Verdana',
'fontColor': '#000'
};
var time = {
'millisecond': 1000,
'second': 60,
'minute': 60,
'hour': 24,
'day': 365
}
var info = {};


// canvas init
var canvasElements = Array.prototype.slice.call(document.querySelectorAll('canvas'));
var canvasCtx = [];
canvasElements.forEach( function(canvas, index) {
canvas.width = specs.centerX * 2;
canvas.height = specs.centerY * 2;
canvasCtx[index] = canvas.getContext('2d');
var name = canvas.id;
info[name] = {'ctx': index, 'value': 0, 'prevValue': -1};
});
var canvasKeys = Object.keys(info);
info.days.denominator = time.day;
info.hours.denominator = time.hour;
info.minutes.denominator = time.minute;
info.seconds.denominator = time.second;

// show remaining time
function showRemainingTime() {
var now = new Date();

// calculate new values
var secondsLeft = Math.max(0, Math.floor((endCountdown - now)/1000));
info.days.value = Math.floor(secondsLeft / (time.second*time.minute*time.hour));
info.hours.value = Math.floor((secondsLeft % (time.second*time.minute*time.hour)) / (time.second*time.minute));
info.minutes.value = Math.floor((secondsLeft % (time.second*time.minute)) / time.second);
info.seconds.value = Math.floor(secondsLeft % time.second);

// update changed values only
canvasKeys.forEach( function(key) {
if(info[key].value !== info[key].prevValue){
  if(key === 'days' && info[key].value > 365) {
    // exception if days is more than 1 year
    draw(canvasCtx[info[key].ctx], 1, key, info[key].value);
  } else {
    draw(canvasCtx[info[key].ctx], info[key].value/info[key].denominator, key, info[key].value);
  }
  info[key].prevValue = info[key].value;
}
});
}

// draw function
function draw(ctx, part, id, value) {
// calculate angles
var start = specs.offset;
var between = 2 * Math.PI * part + specs.offset;
var end = 2 * Math.PI + specs.offset;

// clear canvas
ctx.clearRect(0, 0, specs.centerX * 2, specs.centerY * 2);

// draw remaining %
ctx.fillStyle = specs.color;
ctx.beginPath();
ctx.arc(specs.centerX, specs.centerY, specs.radius, start, between);
ctx.arc(specs.centerX, specs.centerY, specs.radius - specs.thickness, between, start, true);
ctx.closePath();
ctx.fill();

// draw bg
ctx.fillStyle = specs.bgColor;
ctx.beginPath();
ctx.arc(specs.centerX, specs.centerY, specs.radius, between, end);
ctx.arc(specs.centerX, specs.centerY, specs.radius - specs.thickness, end, between, true);
ctx.closePath();
ctx.fill();

// draw text
ctx.fillStyle = specs.fontColor;
ctx.font = specs.idFont;
ctx.fillText(id, specs.radius - ctx.measureText(id).width/2, specs.thickness*3);
ctx.font = specs.valueFont;
ctx.fillText(value, specs.radius - ctx.measureText(value).width/2, specs.radius*2 - specs.thickness*3);
}

// change countdown every second
timer = setInterval(showRemainingTime, 1000);

标签： htmlcanvashtml5-canvas

解决方案

为了不回答这个问题，解决方案是使代码示例（和 codepen）中的半径、centerX 和 centerY 值更大。

推荐阅读