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

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

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

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

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>

источник

2016-07-29 Trupti

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

<!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"); 
 
    \t ctx = canvas.getContext("2d"); 
 
    \t fnOR(); 
 
    } 
 
    function drawClock() { 
 
     var radius; 
 
    \t radius = canvas.height/2; 
 
     ctx.translate(radius, radius); 
 
     radius = radius * 0.9; 
 
     drawCircle(ctx, radius); 
 
    } 
 
    function drawCircle(ctx, radius) { 
 
     var ang; 
 
    \t var num; 
 
    \t 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>

источник

2016-07-29 17:09:23 skaa

Большое спасибо skaa – Trupti

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

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

источник

2016-07-29 17:30:56 Peter

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

ответ

Смежные вопросы