HTML5 Canvas uses its own API to display the shadow effect, which is mainly based on the context of the canvas.
1. <! DOCTYPE html>
2. 3. <meta charset = "UTF-8">
4. <title> HTML5 Combine Shape DEMO </title>
5. <script type = "text/javascript" src = "js/drawShadow. js"> </script>
6. 7.
8. <body onload = "draw ('canvas ')"> </body>
9. 10.
11.
12. <! -- Specify a canvas element for Displaying results -->
13. <canvas id = "canvas" width = "400" height = "400"/>
14. <br>
For a shadow image, see the following js Code:
1 ./**
2. * This file is confidential by Charles. Wang
3. * Copyright belongs to Charles. wang
4. * You can make contact with Charles. Wang (charles_wang888@126.com)
5 .*/
6.
7. function draw (id ){
8.
9. // get the canvas object
10. var canvas = document. getElementById (id );
11. if (canvas = null)
12. return false;
13. // obtain the context
14. var context = canvas. getContext ('2d ');
15. // draw the basemap
16. context. fillStyle = '# FFEEFF ';
17. context. fillRect (0, 0, 400,400 );
18.
19. // The following four attributes are the Shadow setting attributes, which can be used to draw shadow effects.
20.
21. // shadowOffSetX indicates the horizontal displacement. Therefore, if this parameter is set to 10, the shadow will appear on the right of the original image, at most 10 pixels.
22. context. shadowOffSetX = 10;
23. // shadowOffSetX is the vertical displacement. Therefore, if it is set to 10, the shadow will appear under the original image, at most 10 pixels.
24. context. shadowOffsetY = 10;
25. // shadow color
26. context. shadowColor = "rgba (50, 50, 100, 0.5 )";
27. // blur the shadow range
28. context. shadowBlur = 7.5;
29.
30. // so far, the context is associated with the shadow effect. All the images drawn using this context will have the shadow effect (+ 10, + 10) www.2cto.com
31.
32. // draw a star
33. context. translate (50, 50 );
34. create5star (context );
35. context. fill ();
36 .}
37.
38. function create5star (context ){
39.
40. var n = 0;
41. var dx = 100;
42. var dy = 0;
43. var s = 50;
44. // create a path
45. context. beginPath ();
46. context. fillStyle = 'rgba (255,0, 0, 0.5 )';
47. var x = Math. sin (0 );
48. var y = Math. cos (0 );
49. var dig = Math. PI/5*4;
50. // draw 5 sides
51. for (var I = 0; I <5; I ++ ){
52. var x = Math. sin (I * dig );
53. var y = Math. cos (I * dig );
54. context. lineTo (dx + x * s, dy + y * s );
55 .}
56. context. closePath ();
57 .}
Final Display Effect
From consortium of parallel lines
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
