Javascript 画布边框HTML5

大家好，我正在创建html5画布项目，我将画布宽度设置为

$（窗口）。宽度

，效果很好，但设置边框时会出现问题，水平滚动会出现

注意：我尝试使用

innerWidth（）

函数，但尚未找到正确的解决方案。激情让我找到了这个问题发生的原因

$（文档）.ready（函数（）{
$（'canvas'）.width（$（window.width（））；
$（'canvas'）.height（$（window.height（））；
console.log（$（window.width（））
})

*{
-moz框大小：边框框；
-webkit框大小：边框框；
框大小：边框框；
}
.家{
宽度：100%；
高度：自动；
}
帆布{
显示：块；
边框：2px实心#0094ff；
}

删除以下行：

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

使用css设置宽度和高度：

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

---

使用这个css和脚本

css

剧本

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

---

当您使用

.width

和

.height

时，您正在设置内容的大小，而不考虑

bos的大小

。通过

.css（{width，height}）

替换它们。同时删除正文的

边距

，并将画布

显示

设置为

块

，以防止垂直滚动

顺便说一下，您不需要从脚本中设置大小，但可能确实需要设置尺寸标注

$（函数（）{//仅用于设置画布的绘图比例，不影响外观
变量$window=$（window）；
var$canvas=$（“canvas”）；
var border=$canvas.css（“边框宽度”）；
$（“画布”）
.prop（'width'，$window.width（）-2*边框）；
.prop（'height'，$window.height（）-2*边框）；
});
*{
框大小：边框框；
}
html、正文、画布{
显示：块；
保证金：0；
身高：100%；
宽度：100%；
}
帆布{
边框：2px实心#0094ff；
}


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