Canvas labels (4)-use styles and colors

In the drawing section, I only use the default line and fill style. In this chapter, we will explore all the options of canvas to draw more attractive content. (Text/ghost warriors)

Color Colors

So far, we have only seen the Method of Drawing content. If we want to color the image, there are two important attributes: fillstyle and strokestyle.

1. Fillstyle = color
2. Strokestyle = color

Copy code

Strokestyle is used to set the color of the image contour, while fillstyle is used to set the fill color. Color can be a string indicating the CSS color value, gradient object or pattern object. We will look back later to discuss gradient and pattern objects. By default, the line and fill color are both black (CSS color value #000000 ).

You should enter a valid string that complies with the css3 color value standard. The following examples indicate the same color.

1. // These fillstyle values are 'Orange'
2. CTX. fillstyle = "orange ";
3. CTX. fillstyle = "# ffa500 ";
4. CTX. fillstyle = "RGB (255,165, 0 )";
5. CTX. fillstyle = "rgba (255,165 )";

Copy code

Note: currently, the gecko engine does not support all CSS 3 color values. For example, HSL (100%, 25%, 0) or RGB (0,100%, 0) are unavailable. However, if you follow the rules in the above example, there should be no problem.

Note: once you set the value of strokestyle or fillstyle, the new value will become the default value of the newly drawn image. If you want to give different colors to each image, you need to reset the value of fillstyle or strokestyle.

Fillstyle example
Attachment: canvas_fillstyle.png

In this example, I will use a two-layer for loop to draw a square array with different colors. The result is shown on the right, but the code used for implementation is not so brilliant. I used two variables I and J to generate a unique RGB color value for each square. Here, only the values of the red and green channels are modified, while the values of the blue channels remain unchanged. You can modify the values of these color channels to generate a variety of color palette. By increasing the gradient frequency, you can also draw a palette similar to that in Photoshop.

View examples

1. Function draw (){
2. VaR CTX = Document. getelementbyid ('canvas '). getcontext ('2d ');
3. For (VAR I = 0; I <6; I ++ ){
4. For (var j = 0; j <6; j ++ ){
5. CTX. fillstyle = 'rgb ('+ math. Floor (255-42.5 * I) +', '+
6. Math. Floor (255-42.5 * j) + ', 0 )';
7. CTX. fillrect (J * 25, I * 25, 25 );
8. }
9. }
10. }

Copy code

Strokestyle example
This example is a bit similar to the previous one, but this time it uses the strokestyle attribute and draws circles instead of squares.
Attachment: canvas_strokestyle.png

View examples

1. Function draw (){
2. VaR CTX = Document. getelementbyid ('canvas '). getcontext ('2d ');
3. For (VAR I = 0; I <6; I ++ ){
4. For (var j = 0; j <6; j ++ ){
5. CTX. strokestyle = 'rgb (0, '+ math. Floor (255-42.5 * I) +', '+
6. Math. Floor (255-42.5 * j) + ')';
7. CTX. beginpath ();
8. CTX. ARC (12.5 + J * 25, 12.5 + I * 25, 10, 0, math. Pi * 2, true );
9. CTX. Stroke ();
10. }
11. }
12. }