Shulou(Shulou.com)06/03 Report--

This article mainly introduces "the solution that canvas cannot use rem unit". In daily operation, I believe that many people have doubts about the problem that canvas can not use rem unit. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubt that "canvas can not use rem unit solution". Next, please follow the editor to study!

New font unit rem in CSS3

Some time ago, I came across a font unit rem in the wordpress theme. At that time, I was very curious. After all, I had never seen it before, so I immediately looked up the information and tested it.

It is well known that there are many font units (font-size) in web, and the more common one is em,px. Let's compare these two units:

Px is an absolute value, accurate and stable. But its changes will affect the layout of the page.

Em is a relative value that calculates the size based on the size of the parent element. So it's hard to grasp.

Considering the advantages and disadvantages of so many font units, rem was born in CSS3. Rem is also a relative unit (rem=root em). It is obvious that rem is a change from em, or rem is an upgraded version of em. Let's not look into it. On the face of it, that's what it's all about.

Root em, that is, the em relative to the root directory rather than to the parent element, that is, although it is absolute, it is only relative to the root directory, that is, html, and it does not change with other elements. In other words, all we have to do is set the text size of html. Without considering other factors.

And he also has very good support for Chrome,Firefox,Safari,Opera,IE9+.IE6,7,8 can only use px or em.

XML/HTML Code copies content to the clipboard

Html {

Font-size:62.5%

}

Why is it set up like this? Because the font on the web page is 16px by default, and 62.5% of 16px is 10px; that is to say, such a live 1rem is equal to 10px, which is great for us, font-size:1.2rem. Of course, in order to be compatible with the lower version of IE, we have to write font-size:12px, don't forget to write it in front of rem.

What I want to mention here is that if you use rem to set line height, margins and so on. Please add this sentence to html:-webkit-text-size-adjust:none; to eliminate the default attribute of webkit. Otherwise, rem is not based on the root directory in other places.

Canvas cannot use the solution of rem units

When using canvas, we need to set the size of the canvas, that is, to set the width,height property of the canvas tag.

XML/HTML Code copies content to the clipboard

On the mobile side, the size of the canvas should be adapted according to the size of the screen. We usually use rem combined with media query. You encounter some problems when using canvas:

The width attribute of canvas does not support rem units (of course rem is supported if styles are used, but note that the width attribute of canvas is different from width in style), as follows

CSS Code copies content to the clipboard

The parameters passed by the translate method are coordinate locations without units, such as ctx.translate (10pl 10)

Adapting to the screen is necessary, but how to solve it? You can use the original percentage layout:

/ / get the width of the screen

Var clientWidth = document.documentElement.clientWidth

/ / set according to the proportion of canvas canvas in the design drawing

Var canvasWidth = Math.floor (clientWidth*200/720)

Canvas.setAttribute ('width',canvasWidth+'px')

Canvas.setAttribute ('height',canvasWidth+'px')

/ / the translate method can also pass pixel coordinates directly.

At this point, the study on "the solution that canvas cannot use rem units" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.