HTML5 Canvas reagiert nicht

Ich versuche, eine Gruppe von Kreisen mit HTML5-Canvas-Element zu plotten (wie in Abb. 1 gezeigt). enter image description here HTML5 Canvas reagiert nicht

Oben Abbildung wird abgeschnitten, wenn ich die Größe des Browsers ändern. Ich möchte, dass es reagiert, wenn ich die Größe des Browsers ändere.

Bitte helfen Sie mir, es reaktionsfähig zu machen. Vielen Dank.

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>

Quelle

2016-07-29 Trupti

Wenn ich dieses Problem hatte, machte ich auf diese Weise:

<!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>

Quelle

2016-07-29 17:09:23 skaa

Vielen Dank skaa – Trupti

Die Breite und Höhe erhalten gesetzt, wenn Sie Ihre Canvas-Element zu initialisieren, Sie müssen also auf das Größenänderungs-Event des Fensters hören und die Breite und Höhe des Canvas zurücksetzen.

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

Quelle

2016-07-29 17:30:56 Peter

HTML5 Canvas reagiert nicht

Antwort

Verwandte Themen