码迷,mamicode.com
首页 > 其他好文 > 详细

15-canvas渐变色

时间:2020-01-08 14:23:52      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:oct   query   display   背景   gre   doctype   lin   code   tor   

 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>

15-canvas渐变色

标签:oct   query   display   背景   gre   doctype   lin   code   tor   

原文地址:https://www.cnblogs.com/gsq1998/p/12166124.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!