HTML5 canvas отзывчивость не работает

Question

HTML5 canvas отзывчивость не работает

Я пытаюсь построить группу кругов, используя элемент холста HTML5 (как показано на рис. 1). введите описание изображения здесь

Выше рисунок обрезается, когда я изменяю размер браузера. Я хочу, чтобы он был отзывчивым при изменении размера браузера.

Пожалуйста, помогите мне сделать это отзывчивым. Спасибо.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

canvas.width = window.innerWidth; /// equal to window dimension
canvas.height = window.innerHeight;

var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.9;
drawClock();

function drawClock() {
  drawCircle(ctx, radius);
}

function drawCircle(ctx, radius) {
  var ang;
  var num;

  for (num = 1; num <= 40; num++) {
    ang = num * Math.PI / 20;
    ctx.rotate(ang);
    ctx.translate(0, -radius * 0.85);
    ctx.rotate(-ang);
    ctx.beginPath();
    ctx.arc(0, 0, radius / 20, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.rotate(ang);
    ctx.translate(0, radius * 0.85);
    ctx.rotate(-ang);
  }
}

#canvas {
  display: block;
}

<canvas id="canvas"></canvas>

1

javascript canvas responsive-design html5-canvas google-web-designer

Источник

user6263291 29 июл '16 в 00:54

2 ответа

Другие вопросы по тегам javascript canvas responsive-design html5-canvas google-web-designer

user2416096 29 июл '16 в 17:30 2016-07-29 17:30 · Answer 1 · 2016-07-29 17:30

Ширина и высота устанавливаются при инициализации элемента canvas, поэтому вам необходимо прослушать событие изменения размера окна и сбросить ширину и высоту холста.

window.onresize = function() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
};

2

Источник

user2416096 29 июл '16 в 17:30

user4475021 29 июл '16 в 17:09 2016-07-29 17:09 · Answer 2 · 2016-07-29 17:09

Если бы у меня была эта проблема, я сделал бы так:

<!DOCTYPE html>
<html>
  <head>
    <title>expExp.html</title>
    <meta http-equiv='Content-Type' content='text/html;charset=utf-8'/>
    <script>
    var canvas;var ctx;
    function fnOL()
    {
      canvas = document.getElementById("canvas");
      ctx = canvas.getContext("2d");
      fnOR();
    }
    function drawClock() {
      var radius;
      radius = canvas.height / 2;
      ctx.translate(radius, radius);
      radius = radius * 0.9;
      drawCircle(ctx, radius);
    }
    function drawCircle(ctx, radius) {
      var ang;
     var num;
     for (num = 1; num <= 40; num++) {
        ang = num * Math.PI / 20;
        ctx.rotate(ang);
        ctx.translate(0, -radius * 0.85);
        ctx.rotate(-ang);
        ctx.beginPath();
        ctx.arc(0, 0, radius / 20, 0, 2 * Math.PI);
        ctx.stroke();
        ctx.rotate(ang);
        ctx.translate(0, radius * 0.85);
        ctx.rotate(-ang);
      }
    }
    function fnOR()
    {
      canvas.width = window.innerWidth; /// equal to window dimension
      canvas.height = window.innerHeight;
      drawClock();
    }
    </script>
  </head>
  <body onload='fnOL();' onresize="fnOR();">
    <canvas id='canvas'>No Canvas</canvas><br/>
  </body>
</html>