18

今天讲的内容是canvas.width和canvas.style.width的区别,在没有做canvas项目之前,其实我是并没有深入了解过这两个属性的,最近在研究canvas项目的自适应问题,尤其是在canvas中置入图片,碰到了图片模糊的问题,这些“杂症”都是和文章要讲的canvas.width/canvas.style.width有关系。

canvas.width/canvas.style.width概览

先看一下这个例子:https://codepen.io/parkeeers/...

<canvas id="diagonal1" style="border:1px solid;" width="100px" height="100px">
</canvas>
<canvas id="diagonal2" style="border:1px solid;width:200px;height:200px;"
width="100px" height="100px">
</canvas>
<canvas id="diagonal3" style="border:1px solid;width:200px;height:200px;">
</canvas>
<canvas id="diagonal4" style="border:1px solid">
</canvas>

// JavaScript
function drawDiagonal(id) {
  var canvas = document.getElementById(id);
  var context = canvas.getContext("2d");
  context.beginPath();
  context.moveTo(0, 0);
  context.lineTo(100, 100);
  context.stroke();
}

window.onload = function() {
  drawDiagonal("diagonal1");
  drawDiagonal("diagonal2");
  drawDiagonal("diagonal3");
  drawDiagonal("diagonal4");
}
 

效果图

clipboard.png

  • 我们来看第一个canvas,指定了canvas的大小,并未指定canvas.style的大小,那么画布就是实实在在是100*100大小,我们JS代码中,也是在画一条从(0,0)到(100, 100)的对角线。第一个完全没有问题
  • 第二个canvas,canvas本身以及canvas.style都进行了定义,从定义可以看到canvas.style就是在将我们的画布放大2倍,从图也能看到,这条线指向对角没问题,但是变粗了,这也证明了,canvas先是参考自己的本身画布大小进行绘制,绘制完毕,由style指定的大小,渲染在浏览器页面
  • 第三个canvas,本身的canvas与canvas.style不成比例,html中并没有显示的声明canvas本身的大小,只声明了style的大小,那么这种情况下,canvas画布本身的大小就是默认值300*150;那么我们依托300*150进行绘制,就像第四个纯净的canvas上的线条一样绘制,绘制完毕后,要渲染到页面,这个时候,还是和canvas2那个套路一样,依据style指定的width,height进行缩放,状态就由第四个canvas变成了第三个最后的样子。我们来看一下公式:
    默认大小300*150,style指定大小200*200

    clipboard.png
    clipboard.png

    最后标准位置下的(100,100)就变成了在style下200*200的(66.7, 133.333)

  • 最后一幅图就是当不指定canvas大小时,默认的大小,标准的300*150

总结:举了三个不同但是互相关联的例子,通过这些,我们能了解,canvas本身是一个画布,我们怎么理解画布,决定了我们是否能正确的理解canvas.width和canvas.style.width的区别。canvas.width就是画布真实的大小,这个画布不是我们能看到的画布,我们能看见的画布,已经是在浏览器处理canvas.style.width/canvas.style.height之后,加工处理后的画布。而cavnas.style.width/canvas.style.height决定了画布以怎样的形式进行缩放展示给页面。转换的比例就是上面两个公式。最后,当我们不指定canvas的真实大小时,默认按照300*150处理。

  • canvas.width / canvas.height 表示画布真实大小,其实我们并不可见
  • canvas.style.width / canvas.style.height 表示画布输出到浏览器我们可见的/最终的大小
  • 不提供canvas真实大小时,默认按300*150处理,如果canvas.style也没提供,那么style.width为空,注意并不是300*150

canvas图片模糊的问题(待完善)

再讲canvas图片模糊的问题之前,我们可以看一下上面第二个canvas,真实大小与样式指定的大小是呈2倍关系,最后我们的线条也是放大2倍,大家要注意一个概念,canvas绘制是以自己真实大小来定位&绘制的,最后由浏览器渲染到页面可见时,由canvas.style.width/cavnas.style.height决定的


Parkeeers
780 声望32 粉丝

求知若渴,保持谦逊