小结
浏览器解析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.对于canvas元素
会发现通过CSS样式控制 与 直接修改Canvas属性width和height，在浏览器上显示的效果是不一样的.
//控制 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
//这样图片就绘制出来了
|