canvas动态设置宽高

canvas 的默认宽高为 宽 300px? 高 150px

如果在 style 里修改宽高? 相当于对 canvas 做放大 而为了不影响效果? 我们正常显示需要怎么办呢？

一. 行内设置

<canvas id="can" width='800' height='600'></canvas>

这种情况是大家画图的时候知道要给多宽的时候写的? ?但是真正做项目时就用的很少? 因为要适配不同屏幕的电脑

二. JS动态设置

首先我们用一个 div 去包住 canvas

<div id="app">
    <canvas id="can"></canvas>
</div>

然后在 style 或者行内都行设置样式? ?这里 #app 这个盒子占多款多高? canvas 就是多宽多高

#app {
    height: 100%;
    width: 100%;
}

#can {
    width: 100%;
    height: 100%;
}

最后 JS 设置防止拉伸放大

this.app = document.getElementById('app')
this.can = document.getElementById("can")
// 创建一个2Dcanvas画布
this.context = this.can.getContext('2d')
this.can.width = this.app.offsetWidth
this.can.height = this.app.offsetHeight

完成！