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

This article will explain in detail how to use HTML5 Canvas to fill colors and textures for pictures. The content of the article is of high quality, so the editor shares it for you as a reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Fill color

Art is inseparable from color. Today, let's introduce filling color and experience the charm of color.

There are two main types of fill colors:

1. Basic color

two。 Gradient color (divided into linear gradient and radial gradient)

Let's look at it one by one.

Fill basic color

The Canvas fillStyle property is used to set the basic color and fill of shapes on the canvas. FillStyle uses a simple color name. This looks very simple, for example:

JavaScript Code copies content to the clipboard

Context.fillStyle = "red"

The following is a list of sixteen available color string values from the HTML4 specification. Because HTML5 does not modify the exclusive color, the color of HTML4 can be displayed correctly in HTML5.

All of these color values can be applied to the strokeStyle property and the fillStyle property.

All right, let me summarize how to fill the basic color: (it can also be used for the strokeStyle property)

(1) fill it with a color string.

JavaScript Code copies content to the clipboard

Context.fillStyle = "red"

(2) populated with hexadecimal numeric strings.

JavaScript Code copies content to the clipboard

Context.fillStyle = "# FF0000"

(3) fill with the abbreviated hexadecimal numeric string.

JavaScript Code copies content to the clipboard

Context.fillStyle = "# F00"

(4) use the rgb () method to set the color.

JavaScript Code copies content to the clipboard

Context.fillStyle = "rgb (255j0pl 0)"

(5) set the color using the rgba () method.

JavaScript Code copies content to the clipboard

Context.fillStyle = "rgba (255pc0pl 0pl)"

The last parameter of this method passes the alpha value, and the transparency ranges from 1 (opaque) to 0 (transparent).

(6) set the color using the hsl () method.

JavaScript Code copies content to the clipboard

Context.fillStyle = "hsl (0100% 50%)"

HSL is the color that represents the three channels of hue (H), saturation (S) and brightness (L).

(7) set the color using the hsla () method.

JavaScript Code copies content to the clipboard

Context.fillStyle = "hsla (0100% pas 50% pas 1)"

The above seven lines of code are all filled in the red of "# FF0000".

Fill gradient shap

There are two basic options for creating a gradient fill on the canvas: linear or radial. A linear gradient creates a horizontal, vertical, or diagonal hatch pattern. The radial gradient creates a radial fill from the center point. Filling a gradient shape is divided into three steps: adding a gradient line, adding a key color to the gradient line, and applying a gradient. Here are some examples of them.

Linear gradient

Three-step strategy:

Add a gradient:

JavaScript Code copies content to the clipboard

Vargrd = context.createLinearGradient (xstart,ystart,xend,yend)

Add a key color to the gradient line (similar to color breakpoints):

JavaScript Code copies content to the clipboard

Grd.addColorStop (stop,color)

The stop here passes a floating-point number from 0 to 1, which means that the distance from the breakpoint to (xstart,ystart) is proportional to the entire gradient length.

Apply a gradient:

JavaScript Code copies content to the clipboard

Context.fillStyle = grd; context.strokeStyle = grd

Write a code to see.

JavaScript Code copies content to the clipboard

Fill in linear gradients. Your browser doesn't support Canvasgrams! Hurry up and change it! _ window.onload = function () {var canvas = document.getElementById ("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext ("2d"); context.rect (200100400400); / / add gradient var grd = context.createLinearGradient (200300600300) / / add color breakpoints grd.addColorStop (0, "black"); grd.addColorStop (0.5, "white"); grd.addColorStop (1, "black"); / / apply gradient context.fillStyle = grd; context.fill ();}

Running result:

I think it is necessary to make an illustration to facilitate everyone to understand the gradual change at one time.

In order to make it easy to understand, it is recommended that the gradient be regarded as a directed segment. If you are familiar with drawing tools such as PS and have used the gradient settings, it should be easy to understand.

Here, the starting point and end point of the gradient do not have to be in the image, and the position of the color breakpoint is the same. However, if the range of the image is larger than the gradient line, then outside the range of the gradient line, the color of the breakpoint closest to the endpoint is automatically filled.

Here with two supplementary functions to give another example.

A shortcut to draw a rectangle

FillRect (xpenery widthdepartment height), stroke (xjournal yjournal widthdepartment height). These two functions can be thought of as the combination of rect () and fill () and rect () and stroke (), respectively. Because rect () is just a path planning, and these two methods are really plotting.

JavaScript Code copies content to the clipboard

Fill in linear gradients. Your browser doesn't support Canvasgrams! Hurry up and change it! _ window.onload = function () {var canvas = document.getElementById ("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext ("2d"); / / add gradient var grd = context.createLinearGradient (100300700300); / / add color breakpoint grd.addColorStop (0, "olive") Grd.addColorStop (0. 25, "maroon"); grd.addColorStop (0. 5, "aqua"); grd.addColorStop (0. 75, "fuchsia"); grd.addColorStop (0. 25, "teal"); / / apply gradual change context.fillStyle = grd; context.strokeStyle = grd; context.strokeRect (200, 50, 300, 50); context.strokeRect (200, 100, 150, 50) Context.strokeRect (200, 150, 150, 450, 50); context.fillRect (200, 300, 300, 50); context.fillRect (200, 350, 150, 50); context.fillRect (200, 400, 400, 450); context.fillRect (0, 50, 550, 800, 25);}

Running result:

Both pages are horizontal gradients, but be aware that the linear gradient is not necessarily horizontal, the direction can be arbitrary, and the direction can be set by the end of the gradient.

Radial gradient

It is also a three-step strategy, but the method used in the first step has changed.

Add a gradient circle:

JavaScript Code copies content to the clipboard

Var grd = context.createRadialGradient (x0rect y0rer 0rec x1rect y1rect R1)

Add a key color to the gradient line (similar to color breakpoints):

JavaScript Code copies content to the clipboard

Grd.addColorStop (stop,color)

Apply a gradient:

JavaScript Code copies content to the clipboard

Context.fillStyle = grd; context.strokeStyle = grd

A linear gradient is defined based on two endpoints, but a radial gradient is defined based on two circles.

Let's rewrite example 7-2.

JavaScript Code copies content to the clipboard

Fill in radial gradients. Your browser doesn't support Canvasgrams! Hurry up and change it! _ window.onload = function () {var canvas = document.getElementById ("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext ("2d"); / / add gradient var grd = context.createRadialGradient (400300100400300200); / / add color breakpoint grd.addColorStop (0, "olive") Grd.addColorStop (0. 25, "maroon"); grd.addColorStop (0. 5, "aqua"); grd.addColorStop (0. 75, "fuchsia"); grd.addColorStop (0. 25, "teal"); / / apply gradient context.fillStyle = grd; context.fillRect (100100600400);}

Running result:

How do you feel that this color matches so well... Forget it. It's called art.

The method defines the range of the beginning and end of the radial gradient, that is, the gradient between the two circles, the createRadialGradient (x0Query y0rer x1recoveryl); the method defines the starting and ending range of the radial gradient.

To sum up, in this lesson, we learned the properties and methods of fillStyle, createLinearGradient (), createRadialGradient (), addColorStop (), fillRect (), strokeRect (), and introduced the filling basic color, linear gradient, and radial gradient in detail.

Well, now that we have learned to color, then enjoy the use of color, draw our own works of art!

Fill textur

Introduction to createPattern ()

A texture is actually a repetition of a pattern, and the pattern is initialized by the createPattern () function. It needs to pass in two parameters, createPattern (img,repeat-style), the first is an instance of the Image object, and the second is of type String, indicating how the repeat pattern is displayed in the shape. You can use this function to load an image or an entire canvas as a hatch pattern for a shape.

There are four types of image fills:

1. Repeat on the plane: repeat

Repeat on the 2.x axis: repeat-x

Repeat on the 3.y axis: repeat-y

4. Do not use repetition: no-repeat

In fact, the first parameter of createPattern () can also be passed in a canvas object or a video object, here we only talk about the Image object, and the rest of you try it yourself.

Create and fill a pattern

First, take a look at how to load an image:

Create an Image object

Specify a picture source for the Image object

The code is as follows:

JavaScript Code copies content to the clipboard

Var img = new Image (); / / create Image object img.src = "8-1.jpg" / / specify the picture source extension for the Image object: the relative path'. / directory or file name'or 'directory or file name' in HTML refers to the path'.. / directory or file name'of the directory where the current operation is located. It refers to the filling texture after the path of the directory above the directory of the current operation: JavaScript Code copies the contents to the clipboard var pattern = context.createPattern (img, "repeat") Context.fillStyle = pattern

Let's go straight to a complete program, where I'm going to repeatedly fill in this cute giraffe as a texture. It should be noted that when selecting pictures, be sure to choose the kind of pictures that communicate with each other from left to right and up and down as textures, so that there will not be unnatural shortcuts.

The code is provided below.

JavaScript Code copies content to the clipboard

Fill textures your browser doesn't support Canvasgrams! Hurry up and change it! _ window.onload = function () {var canvas = document.getElementById ("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext ("2d"); var img = new Image (); img.src = "8-1.jpg"; img.onload = function () {var pattern = context.createPattern (img, "repeat") Context.fillStyle = pattern; context.fillRect (0J0800600);}}

Running result:

The onload event of Image is used here, and its function is to preload the picture, that is, immediately after the image is loaded, unless the code body of the function is later. This is a must, if not written, the canvas will show a black screen. The browser could not find the picture because it did not wait for the image to be loaded before filling the texture.

On how to use HTML5 Canvas to fill the color and texture of the picture to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.