Canvas 如何自适应屏幕大小？

Question

html5 Canvas 如何自适应屏幕大小

Answer 1

只有内嵌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前设置他的大小

Answer 2

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