html5 Canvas 如何自适应屏幕大小

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html5 Canvas 如何自适应屏幕大小相关的知识,希望对你有一定的参考价值。

只有内嵌css有效,外部css会出现拉伸的情况,
所以有两种方案

var myCanvas = "<canvas id='myCanvas' width='" + screen.availWidth + "px' height='"+ screen.availHeight + "px'></vanvas>";
document.body.insertAdjacenthtml("beforeEnd", myCanvas);
或者这种做法
var myCanvas = document.createElement("canvas");
myCanvas.setAttribute("width", screen.availWidth);
myCanvas.setAttribute("height", screen.availHeight);
myCanvas.setAttribute("id", "myCanvas");
document.body.appendChild(myCanvas);
两种方案的共性都是在把元素添加进DOM前设置他的大小
估计是没分了,给后人看吧
参考技术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> 标签只是图形容器,您必须使用脚本来绘制图形。

参考技术B <canvas id="canvas" style="background-color: #000022;position:absolute;top:0;left:0;"></canvas>
<script>
    var canvas = document.getElementById("canvas");//获取canvas
    function resizeCanvas(canvasElement)
        canvasElement.width = window.innerWidth;
        canvasElement.height = window.innerHeight;
    //这个函数会吧canvas元素的大小变成和浏览器窗口一样大
    //添加监听改变窗口大小的事件
    window.onresize = function()
        resizeCanvas(canvas);
    
    //    需要注意的是改变canvas元素的长宽会清除该canvas
</script>

参考技术C css样式设置width:100%;height:100%;然后用下面四种方法皆可:
1.
canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
2.
canvas.width = screen.availWidth;
canvas.height = screen.availHeight;
3.
canvas.width = screen.width;
canvas.height = screen.height;
4.
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

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

参考技术A

用JS调制屏幕大小。

1.CSS 方面:去掉所有元素的外间距、内边距,html 和 body 宽高设为 100%,canvas 元素 display 设为 block。

2.JS 方面:监听窗口的 resize 事件,在窗口大小改变的同时调整 canvas 的大小。

3.完整代码这里我们使用 jQuery 来处理窗口尺寸改变事件响应,以及属性设置。

4.同时使用 $(window).get(0).innerHeight 获取窗口高度,而不是 $(window).height()。是因为后者效果并不完美,无法返回所有浏览器窗口的完整高度值,这样浏览器窗口中 canvas 元素和滚动条的四周可能会仍存在白色区域。

5.代码公式:<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script src="jquery-3.1.1.js"></script><style>* margin: 0;padding: 0;html, body height: 100%;width: 100%;canvas display: block;background: #D6F8FF;</style><script type="text/javascript">$(function() //添加窗口尺寸改变响应监听$(window).resize(resizeCanvas);//页面加载后先设置一下canvas大小resizeCanvas();)//canvasfunctionresizeCanvas$("#myCanvas").attr("width"$(window).get(0).innerWidth);$("#myCanvas").atr("height", $(window).get(0).innerHeight);;</script></head<body<canvas id="myCanvas" width="400" height="200"></body>。

</html>

以上是关于html5 Canvas 如何自适应屏幕大小的主要内容,如果未能解决你的问题,请参考以下文章

html5 Canvas 如何自适应屏幕大小

HTML5画布自适应屏幕之后,如何获取屏幕中画布图片的坐标区域!急

UGUI屏幕自适应解决办法?

ThreeJS canvas画布自适应的原理

如何让网页自适应屏幕大小

如何让网页在浏览器自适应屏幕大小?