Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Разные значения для разных разрешений? (https://javascript.ru/forum/misc/73662-raznye-znacheniya-dlya-raznykh-razreshenijj.html)

RArtemA 04.05.2018 22:26

Разные значения для разных разрешений?
 
Ребята, подскажите пожалуйста, какое решение будет самым правильным. Есть графический таймер обратного отсчета, в котором есть переменная "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>

j0hnik 04.05.2018 22:40

if (условие) {
 инструкция;
}


Часовой пояс GMT +3, время: 04:54.