Home  >  Article  >  Web Front-end  >  HTML5 canvas basic drawing drawing shadow effect

HTML5 canvas basic drawing drawing shadow effect

巴扎黑
巴扎黑Original
2017-05-21 14:42:492271browse

is a new tag in HTML5, used for drawing graphics. This article mainly introduces the shadow drawing method of basic drawing of HTML5 canvas in detail. Interested friends can For reference,

is a new tag in HTML5, used to draw graphics. In fact, this tag is the same as other tags, and its special features This tag can obtain a CanvasRenderingContext2D object, and we can control the object for drawing through JavaScript scripts.

is just a container for drawing graphics. In addition to attributes such as id, class, and style, it also has height and width attributes. There are three main steps for drawing on the > element:

1. Get the DOM object corresponding to the element, which is a Canvas object;
2. Call the getContext( of the Canvas object ) method to get a CanvasRenderingContext2D object;
3. Call the CanvasRenderingContext2D object for drawing.

Shadow Drawing:

  • shadowColor Sets or returns the color used for shadows.

  • shadowBlur Sets or returns the blur level used for shadows (larger values ​​are more blurry).

  • shadowOffsetX Sets or returns the horizontal distance between the shadow and the shape.

  • shadowOffsetY Sets or returns the vertical distance between the shadow and the shape.

Let’s add a shadow to the previously drawn five-pointed star


##JavaScript CodeCopy content to clipboard

  1. ##var

    canvas = document.getElementById("canvas");

  2. var

    context = canvas.getContext("2d");

  3. context.beginPath( );
  4. //Set the coordinates of a vertex and formulate a path based on the vertex

  5. ##for
  6. (

    var i = 0; i < 5; i++) {

    context.lineTo(Math.cos((18+i*72)/180 *Math.PI)*200+200,                                                                                                   
  7.         context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200,                                      .sin((54+i*72)/180*Math.PI)*80+200);

  8. }

  9. context. closePath();

  10. //Set the border style and fill color
  11. context.lineWidth=
  12. " 3"

    ;

  13. context.fillStyle = "#F6F152";

  14. ## context.strokeStyle =

    "#F5270B";

  15. context.shadowColor =

    "#F7F2B4";

  16. context .shadowOffsetX = 30;

    context.shadowOffsetY = 30;
  17. ## context.shadowBlur = 2;

  18. context.fill();
  19. context.stroke();
  20. ##The effect is as follows:

The above is the detailed content of HTML5 canvas basic drawing drawing shadow effect. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn