HTML5 canvas basic drawing drawing shadow effect

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");

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

##for
5. (

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

   context.lineTo(Math.cos((18+i*72)/180 *Math.PI)*200+200,                                                                                                   

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

7. }

8. context. closePath();

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

    ;

12. context.fillStyle = "#F6F152";

13. ## context.strokeStyle =

    "#F5270B";

14. context.shadowColor =

    "#F7F2B4";

15. context .shadowOffsetX = 30;
    context.shadowOffsetY = 30;

16. ## context.shadowBlur = 2;

context.fill();
context.stroke();

18. ##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!