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

This article mainly shows you "HTML5 Canvas how to achieve color filling", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "HTML5 Canvas how to achieve color filling" this article.

So far, we have only seen ways to draw content. If we want to color graphics, there are two important properties that we can do: fillStyle and strokeStyle.

FillStyle = color

StrokeStyle = color

StrokeStyle is the color used to set the outline of the drawing, while fillStyle is used to set the fill color. A color can be a string, a gradient object, or a pattern object that represents a CSS color value. By default, both the line and fill colors are black (CSS color value # 000000).

The following examples all represent the same color.

/ / the values of these fillStyle are all 'orange'

Ctx.fillStyle = "orange"

Ctx.fillStyle = "# FFA500"

Ctx.fillStyle = "rgb (255 and 165)."

Ctx.fillStyle = "rgba (255, 165, 165, 0, 1)"

Note: the Gecko engine currently does not provide support for all CSS 3 color values. For example, hsl (100% beacon 25% dagger 0) or rgb (0100% rem 0) are not available.

Note: once you have set the value of strokeStyle or fillStyle, this new value will become the default value for newly drawn graphics. If you want to give each graphic a different color, you need to reset the value of fillStyle or strokeStyle.

Canvas fill pattern fillStyle

Description

In this example, I will again use two layers of for loops to draw an array of squares, each of which has a different color. The result is shown on the right, but the code used for the implementation is not so gorgeous. I used two variables, I and j, to produce a unique RGB color value for each square, where only the red and green channel values were modified, while leaving the blue channel values unchanged. You can generate a variety of swatches by changing the values of these color channels. By increasing the frequency of gradients, you can also draw palettes like those in Photoshop.

Code

Function draw () {

Var ctx = document.getElementById ('canvas'). GetContext (' 2d')

For (var iTuno Bandi)

Head >

=

Effect.

Transparency Transparency

In addition to drawing solid color graphics, we can also use canvas to draw translucent graphics. By setting the globalAlpha property or using a translucent color as the outline or fill style.

GlobalAlpha = transparency value

The globalAlpha property is quite efficient when you need to draw a large number of graphics with the same transparency. However, I think the following method is more operable.

Because the strokeStyle and fillStyle properties accept color values that conform to the CSS 3 specification, we can use the following writing to set the color with transparency.

Ctx.strokeStyle = "rgba (255pc0pm 0pr 0.5)"

Ctx.fillStyle = "rgba (255pc0pm 0pr 0.5)"

The rgba () method is similar to the rgb () method, with one more parameter for setting color transparency. Its valid range is from 0.0 (completely transparent) to 1.0 (completely opaque).

Canvas Transparency globalAlpha

Description

In this example, I use a four-color lattice as the background, set globalAlpha to 0.2, and draw a series of semitransparent circles with increasing radius. The end result is a radial gradient effect. The more circles are stacked, the less transparent the original circle will be. By increasing the number of cycles and drawing more circles, the center of the background image will disappear completely.

Note:

This example does not work in Firefox 1.5 beta 1. You need nightly branch build or wait for the new version to be released to practice this effect.

This example may not be effective under Safari because the color value is invalid. In the example,'# 09F'is not compliant with the specification, but Firefox recognizes this format.

Code

=

Function draw () {

Var ctx = document.getElementById ('canvas'). GetContext (' 2d')

/ / draw background

Ctx.fillStyle ='# FD0'

Ctx.fillRect (0pd055pc75)

Ctx.fillStyle ='# 6C0'

Ctx.fillRect (75pr 0pl 75pl 75)

Ctx.fillStyle ='# 09F'

Ctx.fillRect (0pr 75 5pr 75)

Ctx.fillStyle ='# F30'

Ctx.fillRect (75150150)

Ctx.fillStyle ='# FFF'

Ctx.globalAlpha = 0.2

/ / Draw semi transparent circles

For (var iTuno Bandi)

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.