Canvas labels (4)-use styles and colors

Source: Internet
Author: User

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. }

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.