1回答

Lyn

2016-05-11

已采纳

这个地方设置的样式有点特殊。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>

2

3

sally_js

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

2016-05-11

共3条回复