帆布邊框HTML5

Question

你好人，我致力於創建HTML5畫布項目，我設置畫布寬度等於$(window).width，它的工作很好，但問題出現在我設置邊框水平滾動將出現。

說明：我試過使用innerWidth()函數，但我還沒有找到合適的解決方案。激情讓我找出爲什麼會出現這個問題。

$(document).ready(function() { 
 
    $('canvas').width($(window).width()); 
 
    $('canvas').height($(window).height()); 
 
    console.log($(window).width()) 
 

 
})

* { 
 
    -moz-box-sizing: border-box; 
 
    -webkit-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
.home{ 
 
    width:100%; 
 
    height:auto; 
 
} 
 
canvas{ 
 
    display:block; 
 
    border:2px solid #0094ff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="home"> 
 
    <canvas id="myCanvas"></canvas> 
 
</div>

Answer 1

刪除此行：

$('canvas').width($(window).width()); 
$('canvas').height($(window).height()); 
console.log($(window).width()) 

設置width和height用CSS：

canvas{ 
    display:block; 
    border:2px solid #0094ff; 
    width:100%; 
    height:100%; 
} 

Answer 2

用這個CSS和腳本

CSS

{ 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
} 
body{ 
margin: 0px; 
padding: 0px; 
} 
.home{ 
width:100%; 
height:auto; 
} 
canvas{ 
display:block; 
border:2px solid #0094ff; 
} 

腳本

$('canvas').width($(window).width() - 4); 
$('canvas').height($(window).height() - 4); 
console.log($(window).width()); 

Answer 3

當您使用.width和.height要設置的內容大小，無論bos-sizing。通過.css({width, height})替換它們。同時刪除正文的margin，並將畫布display設置爲block以防止垂直滾動。

順便說一下，您不需要從腳本設置大小，但可能需要設置diminsions。

$(function() { // Only to set drawing scale of canvas, doesn't affect appearance 
 
    var $window = $(window); 
 
    var $canvas = $("canvas"); 
 
    var border = $canvas.css("border-width"); 
 
    
 
    $('canvas') 
 
    .prop('width', $window.width() - 2 * border); 
 
    .prop('height', $window.height() - 2 * border); 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 

 
html, body, canvas { 
 
    display: block; 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 

 
canvas{ 
 
    border: 2px solid #0094ff; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<canvas id="myCanvas"></canvas>