html5 Canvas 如何自适应屏幕大小？

Posted 2023-05-05

参考技术A

可以用JS监控屏幕大小，然后调整Canvas的大小。在代码中加入JS

$(window).resize(resizeCanvas);
 function resizeCanvas() 
        canvas.attr("width", $(window).get(0).innerWidth);
        canvas.attr("height", $(window).get(0).innerHeight);
        context.fillRect(0, 0, canvas.width(), canvas.height());
 ;
 resizeCanvas();

就可以了。

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

CSS背景图片自适应屏幕大小

如何控制bodybackground:url(bglogo.gif);
在不同的分辨率显示下 保持背景图片始终全屏显示
不要设置图片的wight 和height 属性值
因为我的笔记本是14寸 而测试机器是17寸
我想让图片不管在多大的屏幕上 总是呈现100%
屏幕小 自动缩小 屏幕大 自动放大
并且始终是maggin:0 auto;的效果

使用滤镜就可以了
<style type="text/css">
body
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bglogo.gif',sizingMethod='scale');
background-repeat: no-repeat;
background-positon: 100%, 100%;

</style> 参考技术A 你可以准备多个尺寸的背景图，用javascript检查浏览器的分辨率，然后根据不同的分辨率调用不同的背景图片做背景。 参考技术B bodybackground:url(bglogo.gif);
默认自动上下左右平铺的。不是拉伸追问

我现在的背景太大了 显示不了全部
因为我的笔记本屏幕小
但是又不能用DIV固定他
固定了换了别的大屏幕的就又会觉得小
所以想他可以自动
图片和屏幕永远保持100%
简单的道理就不用讲解给我了

追答

1、首先你要明白背景图片没法100%。只能通过平铺的方式达到100%
2、你的背景图片超过了笔记本屏幕的大小，就没法显示全部。
3、body background:url("bglogo.gif") repeat fixed!important;
代码说明： fixed 固定，大背景不会因为你拉动滚动条而滚动
4、你反过来想一想，假如显示器有30“，你的图片100%实现了效果，图片是不是被拉伸，是不是会失真。

本回答被提问者采纳 参考技术C background-size:100%;