canvas标签画布实际宽高与显示在界面中宽高的区别

<canvas id ="canvas" width="800" height="500">您的浏览器不支持canvas，请更换浏览器后尝试</canvas>

这行代码里的500,800是画布的实际大小

使用<style>或者通过jquery width(),height()设置的数值都是在页面里显示的宽高

总之就是如果你写的是<canvas width="x" height="y">
但是实际界面宽高是x2,y2
他就会先按照宽高x,y生成x*y大小的图案，然后按照比例x2：y2画到canvas里面去

当xy的值是1600*1000 如果显示效果是半径为2的圆

如果是800*500  就是显示效果半径为4的圆

而如果是500*500 就是椭圆，长半轴在水平方向的

所以如果要在标签外部设置画布实际宽高，

一般是通过设置attribute,比方说

<canvas id ="canvas" width="800" height="500">

$("#canvas").attr("height","300");

审查元素发现height为300.

转载于:https://www.cnblogs.com/lazyfish/p/4471470.html