html 中 height,width 没那么简单

小结

浏览器解析dom(html的元素)时,
是以 style.height 和 style.width为参数的
而width 和 height 属性有特殊用途,
通常修改width 和 height 属性也会影响css
但非绝对

例如:

1.对于 div

div .style.height 和 div .style.width //控制显示大小:

div .height 和 div .width //无意义

div 修改height 是无效的 ,但是修改style.height有效.

div.height=200;//无效

div.style.height="200px" // 有效

2.对于image元素

img.style.width和style.height 
img.width和.height  
都可以控制 img 元素尺寸

注意:
如果图片变形,那么只有naturalHeight和naturalWidth 才是图像真实的大小,而且只有在img.onload()之后才能获取到,否则得不到

2.对于canvas元素

//控制 Canvas 元素显示大小:(在浏览器上显示的效果.)
canvas.style.height 和 canvas.style.width

//控制 Canvas 绘面大小:(画布大小)
canvas.height 和 canvas.width 

Canvas 元素本身和元素绘图面, 默认的大小都是300x150像素。

ctx.drawImage(img…) 绘图时,
必须先设置好canvas.height 和 canvas.width ,

绘制时, 会以 图像与Canvas比较 最小宽和最小高进行绘制,这会超出你的预期.

例如:

...
img.width=200,
img.height=400;
canvas.width=300,
canvas.height=100;
// 设置 css(.style.width和.style.height)  没有用,
// 只是控制canvas元素大小,图像会被进一步缩放
...
ctx.drawImage(......)  
//最终绘制出的图像的尺寸为  width=200,height=100

为了能够绘制出width=200,height=400;的效果
必须在绘制前提前修改 canvas 的 width,height ,让canvas 能够容得下图像.也就是:

canvas.width=300; //300>=200
canvas.height=500;//500>=400
//这样图片就绘制出来了