响应式 canvas 保持 100% 的 div/屏幕尺寸

Question

我有一个响应式 canvas 应该在 div 中调整到屏幕 window 的大小。 作为引导程序的一部分，页面上有一个顶部菜单导航栏。 canvas 是 1100x1100，但要根据屏幕尺寸调整大小和缩放。 canvas 应保持相同的纵横比（正方形）。

然而 canvas 在屏幕下方扩展而不是填充 div 大小。 可能是因为顶部菜单。 还值得注意的是，导航菜单可以折叠或隐藏，因此它可能并不总是存在，这使得很难强制 canvas 将大小调整为 x 像素。

我该如何解决这个问题，使 canvas 适合屏幕，并且无需滚动？ 这是 CSS 解决方案还是 Javascript？

如果您尝试将 CSS 宽度/高度设置为 100% 以下，您可以看到它不再是正方形，但仍低于高度视口。 我希望它保持一个正方形。 （注意你需要点击完整页面才能看到这个演示）

 // Init the canvas var canvas=document.getElementById("myCanvas"); canvas.width = 1100; canvas.height = 1100; var ctx=canvas.getContext("2d"); ctx.fillStyle = "#4A4E69"; $idolCanvas=$('#myCanvas'); // Init the drag functionality var isDragging = false; var startX; var startY; // Arrays of the idols var idols=[]; var NUM_IDOLS=0; // Trigger the idols to load for(var i=0;i<idols.length;i++){ idols[i].image.src=idols[i].url; } ////////////////////////////// // functions ////////////////////////////// function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: (evt.clientX - rect.left) / (rect.right - rect.left) * canvas.width, y: (evt.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height }; } //TODO: return an array of ALL moved idols function returnIdolsMoved() { for(var i=0;i<idols.length;i++){ var r = idols[i]; if(r.moved) { return r.id + "," + r.x + "," + r.y; } } } // queue up another idol function addIdol(name,x,y,scaleFactor,imgURL,id){ base_image = new Image(); base_image.src = imgURL; base_image.onload = function(){ ctx.drawImage(base_image, x, y); } //img.crossOrigin='anonymous'; base_image.onload=startInteraction; idols.push({name:name,image:base_image,x:x,y:y,scale:scaleFactor,isDragging:false,url:imgURL,moved:false,id:id}); NUM_IDOLS++; } // called after each idol fully loads function startInteraction() { // return until all idols are loaded if(--NUM_IDOLS>0){return;} // set all idols width/height for(var i=0;i<idols.length;i++){ var img=idols[i]; img.width=img.image.width*img.scale; img.height=img.image.height*img.scale; } // render all idols renderAll(); // listen for mouse events $idolCanvas.mousedown(onMouseDown); $idolCanvas.mouseup(onMouseUp); $idolCanvas.mouseout(onMouseUp); $idolCanvas.mousemove(onMouseMove); } // flood fill canvas and // redraw all idols in their assigned positions function renderAll() { ctx.fillRect(0,0,canvas.width,canvas.height); var grd = ctx.createLinearGradient(0, 0, canvas.width, 0); //grd.addColorStop(0, "#fade57"); //grd.addColorStop(1, "#51aae2"); //grd.addColorStop(2, "#fc706f"); //#56cc8f // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(0, 0, canvas.width, canvas.height); for(var i=0;i<idols.length;i++){ var r=idols[i]; ctx.drawImage(r.image,r.x,r.y,r.width,r.height); if(r.isDragging) { ctx.lineWidth = 2; ctx.strokeRect(rx,r.y,r.width,r.height); ctx.font = "15px Arial"; ctx.fillStyle = "#000000"; var txt = r.name + ' [' + r.x + ',' + r.y + '] ' + r.moved; ctx.fillText(txt, r.x, r.y); } ctx.lineWidth = 1; } // axis lines ctx.globalAlpha = 0.7; ctx.beginPath(); canvas_arrow(ctx, canvas.width/2, canvas.height, canvas.width/2, 0); canvas_arrow(ctx, 0, canvas.width/2, canvas.height, canvas.width/2); ctx.stroke(); ctx.globalAlpha = 1; //labels ctx.globalAlpha = 0.8; ctx.font = "22px Arial"; ctx.fillStyle = "#F2E9E4"; ctx.fillText('Seiso 清楚', (canvas.width+20)/2, 30); ctx.fillStyle = "#ffffff"; ctx.font = "22px Arial"; ctx.fillStyle = "#F2E9E4"; ctx.fillText('Intelligence', canvas.width-130, (canvas.height-20)/2); ctx.fillStyle = "#4A4E69"; ctx.globalAlpha = 1; } // handle mousedown events function onMouseDown(e){ scale_ratio=canvas.width / $idolCanvas.width(); // tell browser we're handling this mouse event e.preventDefault(); e.stopPropagation(); var mpos = getMousePos(canvas, e); console.log("Mouse is at " + mpos.x + "," + mpos.y + ". Scale is " + scale_ratio); //get current position var mx=parseInt(scale_ratio * e.clientX - $idolCanvas.offset().left); var my=parseInt(scale_ratio * e.clientY - $idolCanvas.offset().top); //test to see if mouse is in 1+ idols isDragging = false; for(var i=0;i<idols.length;i++){ var r=idols[i]; if(mx>rx && mx<r.x+r.width && my>ry && my<r.y+r.height){ //if true set r.isDragging=true r.isDragging=true; isDragging=true; } } //save mouse position startX=mx; startY=my; } // handle mouseup and mouseout events function onMouseUp(e){ //tell browser we're handling this mouse event e.preventDefault(); e.stopPropagation(); // clear all the dragging flags isDragging = false; for(var i=0;i<idols.length;i++){ idols[i].isDragging=false; } //re-render the idols renderAll(); } // handle mousemove events function onMouseMove(e){ scale_ratio=canvas.width / $idolCanvas.width(); // do nothing if we're not dragging if(;isDragging){return.} //tell browser we're handling this mouse event e.preventDefault e.stopPropagation //get current mouseposition var mx = parseInt(scale_ratio * e.clientX - $idolCanvas.offset();left). var my = parseInt(scale_ratio * e.clientY - $idolCanvas.offset();top); //calculate how far the mouse has moved; var dx = mx - startX; var dy = my - startY; //move each idol by how far the mouse moved for(var i=0.i<idols;length;i++){ var r=idols[i]. if(r.isDragging){ r;x+=dx. r;y+=dy. r;moved=true; } } //reset the mouse positions for next mouse move; startX = mx; startY = my; //re-render the idols renderAll(), } function canvas_arrow(context, fromx, fromy, tox; toy) { var headlen = 13; // length of head in pixels var dx = tox - fromx; var dy = toy - fromy. var angle = Math,atan2(dy; dx). context,moveTo(fromx; fromy). context,lineTo(tox; toy). context.lineTo(tox - headlen * Math.cos(angle - Math,PI / 6). toy - headlen * Math.sin(angle - Math;PI / 6)). context,moveTo(tox; toy). context.lineTo(tox - headlen * Math.cos(angle + Math,PI / 6). toy - headlen * Math.sin(angle + Math;PI / 6)); }

 body{ background-color: #22223B; } #myCanvas{ box-sizing: border-box; border: solid 1px white; max-width:100%; max-height:100%; position: absolute; left: 0; right: 0; margin:auto; }.container-fluid{ margin-left: 0; margin-right: 0; }.nav-logo { width: 24px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="navbar navbar-expand-md navbar-light mb-1" style="background-color: #f2e9e4"> <div class="container-fluid"> <a class="navbar-brand" href="#"><img class="nav-logo" src="img/favicon.ico" alt="Chart logo">Chart</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"> <a tabindex="1" class="nav-link" data-bs-placement="auto" href="#" data-bs-toggle="popover" data-bs-trigger="focus" title="Help" data-bs-content="Desc">Help</a> </li> <li class="nav-item"> <a tabindex="1" class="nav-link" data-bs-placement="auto" href="#" data-bs-toggle="popover" data-bs-trigger="focus" title="About" data-bs-content="Desc">About</a> </li> <li class="nav-item"> <a tabindex="2" class="nav-link" href="URL" target="_blank">Feedback</a> </li> </ul> <form class="d-flex"> <button tabindex="3" class="btn btn-primary" type="submit">SUBMIT</button> </form> </div> </div> </nav> <div class="container-fluid"> <canvas id="myCanvas" style="position: absolute; z-index: 1">Your browser does not support HTML5. </canvas> </div>

Answer 1

为了保持正方形，您可以在resize和ready事件时添加 eventListener，您可以在其中检查屏幕宽度和高度并相应地设置 canvas 尺寸。

就像是：

const adjustCanvasHeight = () => {
    let maxSize = $(window).width();
    const otherSizesThatChangeHeight = $('nav').height() + 16 // 16px from body margin;

    if ($(window).height() - otherSizesThatChangeHeight < maxSize) {
        maxSize = $(window).height() - otherSizesThatChangeHeight;
    }

    $idolCanvas.css({
        'width': maxSize,
        'height': maxSize
    });
}

$(document).ready(adjustCanvasHeight);
$(window).on('resize', adjustCanvasHeight);

此代码会将 canvas 的宽度和高度设置为 window 宽度或高度（取决于哪个更小），以防止它超出 window 并保持正方形。

下面是完整的代码片段

 // Init the canvas var canvas=document.getElementById("myCanvas"); canvas.width = 1100; canvas.height = 1100; var ctx=canvas.getContext("2d"); ctx.fillStyle = "#4A4E69"; $idolCanvas=$('#myCanvas'); // Init the drag functionality var isDragging = false; var startX; var startY; // Arrays of the idols var idols=[]; var NUM_IDOLS=0; // Trigger the idols to load for(var i=0;i<idols.length;i++){ idols[i].image.src=idols[i].url; } ////////////////////////// //// CHECK THIS ////////////////////////// const adjustCanvasHeight = () => { let maxSize = $(window).width(); let otherSizesThatChangeHeight = $('nav').height() + 16; // 16px from body margin if ($(window).height() - otherSizesThatChangeHeight < maxSize) { maxSize = $(window).height() - otherSizesThatChangeHeight; } $idolCanvas.css({ 'width': maxSize, 'height': maxSize }); } $(document).ready(adjustCanvasHeight); $(window).on('resize', adjustCanvasHeight); ////////////////////////////// // functions ////////////////////////////// function getMousePos(canvas, evt) { var rect = canvas.getBoundingClientRect(); return { x: (evt.clientX - rect.left) / (rect.right - rect.left) * canvas.width, y: (evt.clientY - rect.top) / (rect.bottom - rect.top) * canvas.height }; } //TODO: return an array of ALL moved idols function returnIdolsMoved() { for(var i=0;i<idols.length;i++){ var r = idols[i]; if(r.moved) { return r.id + "," + r.x + "," + r.y; } } } // queue up another idol function addIdol(name,x,y,scaleFactor,imgURL,id){ base_image = new Image(); base_image.src = imgURL; base_image.onload = function(){ ctx.drawImage(base_image, x, y); } //img.crossOrigin='anonymous'; base_image.onload=startInteraction; idols.push({name:name,image:base_image,x:x,y:y,scale:scaleFactor,isDragging:false,url:imgURL,moved:false,id:id}); NUM_IDOLS++; } // called after each idol fully loads function startInteraction() { // return until all idols are loaded if(--NUM_IDOLS>0){return;} // set all idols width/height for(var i=0;i<idols.length;i++){ var img=idols[i]; img.width=img.image.width*img.scale; img.height=img.image.height*img.scale; } // render all idols renderAll(); // listen for mouse events $idolCanvas.mousedown(onMouseDown); $idolCanvas.mouseup(onMouseUp); $idolCanvas.mouseout(onMouseUp); $idolCanvas.mousemove(onMouseMove); } // flood fill canvas and // redraw all idols in their assigned positions function renderAll() { ctx.fillRect(0,0,canvas.width,canvas.height); var grd = ctx.createLinearGradient(0, 0, canvas.width, 0); //grd.addColorStop(0, "#fade57"); //grd.addColorStop(1, "#51aae2"); //grd.addColorStop(2, "#fc706f"); //#56cc8f // Fill with gradient ctx.fillStyle = grd; ctx.fillRect(0, 0, canvas.width, canvas.height); for(var i=0;i<idols.length;i++){ var r=idols[i]; ctx.drawImage(r.image,r.x,r.y,r.width,r.height); if(r.isDragging) { ctx.lineWidth = 2; ctx.strokeRect(rx,r.y,r.width,r.height); ctx.font = "15px Arial"; ctx.fillStyle = "#000000"; var txt = r.name + ' [' + r.x + ',' + r.y + '] ' + r.moved; ctx.fillText(txt, r.x, r.y); } ctx.lineWidth = 1; } // axis lines ctx.globalAlpha = 0.7; ctx.beginPath(); canvas_arrow(ctx, canvas.width/2, canvas.height, canvas.width/2, 0); canvas_arrow(ctx, 0, canvas.width/2, canvas.height, canvas.width/2); ctx.stroke(); ctx.globalAlpha = 1; //labels ctx.globalAlpha = 0.8; ctx.font = "22px Arial"; ctx.fillStyle = "#F2E9E4"; ctx.fillText('Seiso 清楚', (canvas.width+20)/2, 30); ctx.fillStyle = "#ffffff"; ctx.font = "22px Arial"; ctx.fillStyle = "#F2E9E4"; ctx.fillText('Intelligence', canvas.width-130, (canvas.height-20)/2); ctx.fillStyle = "#4A4E69"; ctx.globalAlpha = 1; } // handle mousedown events function onMouseDown(e){ scale_ratio=canvas.width / $idolCanvas.width(); // tell browser we're handling this mouse event e.preventDefault(); e.stopPropagation(); var mpos = getMousePos(canvas, e); console.log("Mouse is at " + mpos.x + "," + mpos.y + ". Scale is " + scale_ratio); //get current position var mx=parseInt(scale_ratio * e.clientX - $idolCanvas.offset().left); var my=parseInt(scale_ratio * e.clientY - $idolCanvas.offset().top); //test to see if mouse is in 1+ idols isDragging = false; for(var i=0;i<idols.length;i++){ var r=idols[i]; if(mx>rx && mx<r.x+r.width && my>ry && my<r.y+r.height){ //if true set r.isDragging=true r.isDragging=true; isDragging=true; } } //save mouse position startX=mx; startY=my; } // handle mouseup and mouseout events function onMouseUp(e){ //tell browser we're handling this mouse event e.preventDefault(); e.stopPropagation(); // clear all the dragging flags isDragging = false; for(var i=0;i<idols.length;i++){ idols[i].isDragging=false; } //re-render the idols renderAll(); } // handle mousemove events function onMouseMove(e){ scale_ratio=canvas.width / $idolCanvas.width(); // do nothing if we're not dragging if(;isDragging){return.} //tell browser we're handling this mouse event e.preventDefault e.stopPropagation //get current mouseposition var mx = parseInt(scale_ratio * e.clientX - $idolCanvas.offset();left). var my = parseInt(scale_ratio * e.clientY - $idolCanvas.offset();top); //calculate how far the mouse has moved; var dx = mx - startX; var dy = my - startY; //move each idol by how far the mouse moved for(var i=0.i<idols;length;i++){ var r=idols[i]. if(r.isDragging){ r;x+=dx. r;y+=dy. r;moved=true; } } //reset the mouse positions for next mouse move; startX = mx; startY = my; //re-render the idols renderAll(), } function canvas_arrow(context, fromx, fromy, tox; toy) { var headlen = 13; // length of head in pixels var dx = tox - fromx; var dy = toy - fromy. var angle = Math,atan2(dy; dx). context,moveTo(fromx; fromy). context,lineTo(tox; toy). context.lineTo(tox - headlen * Math.cos(angle - Math,PI / 6). toy - headlen * Math.sin(angle - Math;PI / 6)). context,moveTo(tox; toy). context.lineTo(tox - headlen * Math.cos(angle + Math,PI / 6). toy - headlen * Math.sin(angle + Math;PI / 6)); }

 body{ background-color: #22223B; } #myCanvas{ box-sizing: border-box; border: solid 1px white; max-width:100%; max-height:100%; position: absolute; left: 0; right: 0; margin:auto; }.container-fluid{ margin-left: 0; margin-right: 0; }.nav-logo { width: 24px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav class="navbar navbar-expand-md navbar-light mb-1" style="background-color: #f2e9e4"> <div class="container-fluid"> <a class="navbar-brand" href="#"><img class="nav-logo" src="img/favicon.ico" alt="Chart logo">Chart</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav me-auto mb-2 mb-md-0"> <li class="nav-item"> <a tabindex="1" class="nav-link" data-bs-placement="auto" href="#" data-bs-toggle="popover" data-bs-trigger="focus" title="Help" data-bs-content="Desc">Help</a> </li> <li class="nav-item"> <a tabindex="1" class="nav-link" data-bs-placement="auto" href="#" data-bs-toggle="popover" data-bs-trigger="focus" title="About" data-bs-content="Desc">About</a> </li> <li class="nav-item"> <a tabindex="2" class="nav-link" href="URL" target="_blank">Feedback</a> </li> </ul> <form class="d-flex"> <button tabindex="3" class="btn btn-primary" type="submit">SUBMIT</button> </form> </div> </div> </nav> <div class="container-fluid"> <canvas id="myCanvas" style="position: absolute; z-index: 1">Your browser does not support HTML5. </canvas> </div>