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

私はこの問題を持っていた場合、私はこの方法を作った：あなたはあなたのcanvas要素を初期化するとき

<!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キャンバスの応答がうまくいかない

答えて

関連する問題