canvas.width和canvas.style.width区别以及应用

今天讲的内容是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");
}
 

效果图

• 我们来看第一个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

  
  

  最后标准位置下的（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决定的