canvas 自適應

自適應

• 根據窗口變化自適應大小

var canvas = document.getElementById('canvas');

window.addEventListener("resize", resizeCanvas, false);

 

function resizeCanvas() {

w = canvas.width = window.innerWidth;

h = canvas.height = window.innerHeight;

}

• 根據父盒子自適應大小

<style>

.brokenLine {

display: block;

margin: 0 auto;

margin-top: 10px;

width: 400px;

height: 400px;

background: pink;

}

</style>

//////////////布局///////////////

<div id="brokenLine" class="brokenLine">

<canvas id="canvas" style=" height: 100%;width: 100%;display: inline-block;"></canvas>

</div>