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

Most people do not understand the knowledge points of this article "how to HTML5 to replace an expected wide thin line", so the editor summarizes the following content to you, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to achieve HTML5 to replace an expected wide thin line" article.

The code is as follows:

Ctx.lineWidth = 1

Ctx.beginPath ()

Ctx.moveTo (10100)

Ctx.lineTo (300100)

Ctx.stroke ()

The result of the run does not show a line of expected width.

Feel how thick ah, with the often seen web version of a variety of replacement line effect

It's very different. Didn't HTML5 Canvas think of doing better?

In fact, the root cause of this is that the replacement of Canvas instead of starting from the middle starts from 0 to 1, not from 0 to 1.

+ 0 / 0. 5 layout, so

Causes the fade to be at the edge and looks like the line is wide.

There are two solutions, one is the dislocation covering method, and the other is the center.

Translate (0.5, 0.5). The implementation code is as follows:

The misplaced covering method I have packaged as a function of the original context

Copy the code

The code is as follows:

/ * *

*

Draw a pixel line

* @ param fromX

* @ param formY

* @ param toX

* @ param toY

* @ param backgroundColor- defaults to white

* @ param vertical-boolean

* /

CanvasRenderingContext2D.prototype .onePixelLineTo = function (fromX,fromY,toX,toY,backgroundColor, vertical) {

Var currentStrokeStyle = this.strokeStyle

This.beginPath ()

This.moveTo (fromX,fromY)

This.lineTo (toX,toY)

This.closePath ()

This.lineWidth = 2

This.stroke ()

This.beginPath ()

If (vertical) {

This.moveTo (fromX + 1m from Y)

This.lineTo (toX + 1 to Y)

} other {

This.moveTo (fromX,fromY + 1)

This.lineTo (toX,toY + 1)

}

This.closePath ()

This.lineWidth = 2

This.strokeStyle = backgroundColor

This.stroke ()

This.strokeStyle = currentStrokeStyle

}

The code of the center translation method is as follows:

Copy the code

The code is as follows:

Ctx.save ()

Ctx.translate (0.5, 0.5)

Ctx.lineWidth = 1

Ctx.beginPath ()

Ctx.moveTo (10100)

Ctx.lineTo (300100)

Ctx.stroke ()

Ctx.restore ()

Pay special attention to make sure that all your coordinate points are integrated, otherwise HTML5 will automatically realize edge anti-aliasing.

It makes one of your lines look thicker again.

The above is about the content of this article on "how to replace an expected wide thin line with HTML5". I believe we all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.