Home > Article > Web Front-end > 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
1. Get the DOM object corresponding to the
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
canvas = document.getElementById("canvas");
context = canvas.getContext("2d");
var i = 0; i < 5; i++) {
context.lineTo(Math.cos((18+i*72)/180 *Math.PI)*200+200,context.lineTo(Math.cos((54+i*72)/180*Math.PI)*80+200, .sin((54+i*72)/180*Math.PI)*80+200);
}
context. closePath();
//Set the border style and fill color
;
context.fillStyle = "#F6F152";
"#F5270B";
"#F7F2B4";
context.shadowOffsetY = 30;
## context.shadowBlur = 2;
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!