这里的canvascss中设定的样式为什么可以盖过js设定的样式

Question

canvas通过js在行内样式已经有了width=530，height=400了，为什么css中设置100%，可以让它跟父级一样大

Answer 1

Lyn 2016-05-11 10:34:30

这个地方设置的样式有点特殊。canvas是一个特殊的元素。本质上你可以把 canvas 当作一张图片。

用油画来比喻， cns.width cns.height 是油画的画框， ctx.width , ctx.height 是画布。理论上这两个设置应该是一样的，不然的话一部分画就超出框外了（我们假设画框默认就有 overflow:hidden  的能力。

然后，我们把这个油画拍成一张照片（css设置 width:100%,height:100%）放在另一个框里面（根据父元素大小调整自己），照片嘛我们当然可以放大缩小了（实际上我们都是缩小一半来用的，为了在高清屏下显示不会模糊）。

<canvas id="canvas"></canvas>
<script>
  var cns = document.createElement('canvas');
  var ctx = cns.getContext('2d');
  cns.width = ctx.width = w;   // 设置元素（画框）大小、画布（画布）大小
  cns.height = ctx.height =h;
</script>
<style>
#canvas{
    width:100%;height:100%; /*设置照片大小*/
}
</style>

• 提问者 sally_js #1

  谢谢老师，这里的ctx也要设为和画布一样的大小是有什么讲究吗？我的理解ctx就是一个画笔，为什么要设置大小

• 提问者 sally_js #2

  非常感谢！

• 提问者 sally_js #3

  因为我一直都没有设ctx 的值好像问题也不大