HTML5 canvas style height vs attribute height

2019-08-25 19:21发布

问题:

I am currently learning how to use HTML5 new elements and I stumbled upon a frustrating issue with all graphic functions such as fillRect() and drawImage().

I was setting the widgth and height with

style="width: 75px;height: 10px;"

instead of

width="200" height="100"

The result being that the graphics would not be the proper scale ever.

My question is, why does it make a difference? There is something I obviously do not understand about it all.

Thank you

回答1:

I know that at least in JSF (specifically primefaces) the difference is that if you put height in the style- it will not be used to properly calculate and render the component (the more complex ones) sometimes. If you put it as attribute then it will work.

If HTML5 takes the similar approach it would mean that attribute height and width are the actual height and width of the component and the style is just the way to display it. Sometimes however, both approaches are going to end with the same result.

Also in primefaces when you specify height and width as attribute- you can not use percentages. This could be the key- an additional measure of enforcing specific width and heights rathen than percentages.