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决定的