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>