Показать сообщение отдельно
  #1 (permalink)  
Старый 04.05.2018, 22:26
Новичок на форуме
Отправить личное сообщение для RArtemA Посмотреть профиль Найти все сообщения от RArtemA
 
Регистрация: 01.04.2018
Сообщений: 3

Разные значения для разных разрешений?
Ребята, подскажите пожалуйста, какое решение будет самым правильным. Есть графический таймер обратного отсчета, в котором есть переменная "canvasSize = 279", задающая диаметр круга таймера. Хотелось бы задавать ее значение через условие: Если width меньше 320 (к примеру), то canvasSize = 279, если больше, то canvasSize = 300(к примеру). Куда копать?)

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>timer</title>
  </head>
 <body>
   <div class="Canvas">	
<canvas id="myCanvas" ></canvas>
<script>
var timesCode = "E3";
  var timemin = 1;
  var times = 60 * timemin;
  var t1 = "" + times + "";
  var tim = t1+timesCode;
  var myCanvas = document.getElementById("myCanvas"),
    context = myCanvas.getContext("2d"),
    timeLimit = tim,
    timeStart = (new Date).getTime(),
    canvasSize = 279,
    lineWidth = 16,
    drawX = drawY = radius = canvasSize / 2;
    radius -= lineWidth / 2;
    myCanvas.width = canvasSize;
    myCanvas.height = canvasSize;

function go() {
    context.beginPath();
    context.lineWidth = lineWidth;
    context.lineCap = "round";
    context.strokeStyle = "rgb(37, 160, 223)";
    var a = ((new Date).getTime() - timeStart) / timeLimit;
    context.clearRect(0, 0, canvasSize, canvasSize);
    context.font = '25px "Tahoma"';
    context.fillText((100 - a*100)|0, radius, drawY);
    context.arc(drawX, drawY, radius, -Math.PI / 2 + 2 * Math.PI * a, -Math.PI / 2, !1);
    context.stroke();
    1 < a && (timeStart = (new Date).getTime());
    timers = window.setTimeout(go, 50)
}
go();
</script>

</div>


 </body>
</html>
Ответить с цитированием