1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| <!DOCTYPE html>
| <html lang="en">
| <head>
| <meta charset="UTF-8">
| <meta http-equiv="X-UA-Compatible" content="IE=edge">
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
| <title>Document</title>
| </head>
| <body>
| <canvas id="canva" width="3000" height="150" style="border: 1px solid #d3d3d3;">
| not support html5 tag </canvas>
| <script type="text/javascript">
| var c=document.getElementById("canva");
| var ctx=c.getContext("2d");
| ctx.shadowBlur=10;
| ctx.fillStyle="yellow";
|
| ctx.shadowColor="black";
| ctx.fillRect(20,20,100,80);
|
| ctx.shadowColor="green";
| ctx.fillRect(140,20,100,80);
|
|
| ctx.shadowColor="green";
| var grd=ctx.createRadialGradient(260,20,5,280,20,5);
| grd.addColorStop(0,"red");
| grd.addColorStop(1,"white");
| ctx.fillStyle=grd;
| // ctx.shadowOffsetX=40;
| // ctx.shadowOffsetY=40;
| ctx.fillRect(260,20,100,80);
|
| </script>
|
| </body>
| </html>
|
|
