html5 Canvas 如何自適應(yīng)屏幕大??？
3 回答
慕仙森
TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超8個(gè)贊
用JS調(diào)制屏幕大小。
1.CSS 方面：去掉所有元素的外間距、內(nèi)邊距，html 和 body 寬高設(shè)為 100%，canvas 元素 display 設(shè)為 block。
2.JS 方面：監(jiān)聽(tīng)窗口的 resize 事件，在窗口大小改變的同時(shí)調(diào)整 canvas 的大小。
3.完整代碼這里我們使用 jQuery 來(lái)處理窗口尺寸改變事件響應(yīng)，以及屬性設(shè)置。
4.同時(shí)使用 $(window).get(0).innerHeight 獲取窗口高度，而不是 $(window).height()。是因?yàn)楹笳咝Ч⒉煌昝?，無(wú)法返回所有瀏覽器窗口的完整高度值，這樣瀏覽器窗口中 canvas 元素和滾動(dòng)條的四周可能會(huì)仍存在白色區(qū)域。
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() {//添加窗口尺寸改變響應(yīng)監(jiān)聽(tīng)$(window).resize(resizeCanvas);//頁(yè)面加載后先設(shè)置一下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>
慕斯王
TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超2個(gè)贊
只有內(nèi)嵌css有效，外部css會(huì)出現(xiàn)拉伸的情況，
所以有兩種方案
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);
兩種方案的共性都是在把元素添加進(jìn)DOM前設(shè)置他的大小