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.