15-canvas渐变色

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>15-Canvas渐变色</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         canvas{
12             display: block;
13             margin: 0 auto;
14             background: red;
15         }
16     </style>
17 </head>
18 <body>
19 <canvas width="500" height="400"></canvas>
20 <script>
21     /*
22     1.渐变背景颜色
23     和普通的标签一样我们也可以给填充的图形设置线性渐变和径向渐变的背景颜色
24 
25     2.设置图形渐变背景颜色步骤
26     2.1通过绘图工具创建渐变背景颜色
27     2.2指定渐变的范围
28     2.3将渐变背景颜色设置给对应的图形
29     * */
30     // 1.拿到canvas
31     let oCanvas = document.querySelector("canvas");
32     // 2.从canvas中拿到绘图工具
33     let oCtx = oCanvas.getContext("2d");
34 
35     // 1.创建一个渐变的方案
36     /*
37     可以通过x0,y0 / x1,y1确定渐变的方向和渐变的范围
38     * */
39     let linearGradient = oCtx.createLinearGradient(100, 100, 300, 300);
40     /*
41     第一个参数是一个百分比 0~1
42     第二个参数是一个颜色
43     * */
44     linearGradient.addColorStop(0, "green");
45     linearGradient.addColorStop(0.5, "yellow");
46     linearGradient.addColorStop(1, "blue");
47 
48     // oCtx.createRadialGradient();
49     // oCtx.fillStyle = "blue";
50     // fillStyle填充的颜色
51     oCtx.fillStyle = linearGradient;
52     oCtx.fillRect(100, 100, 200, 200);
53 </script>
54 </body>
55 </html>
猜你喜欢
