《canvas》之第9章渐变与阴影

第9章渐变和阴影
- 9.1 线性渐变
- 9.2 径向渐变
9.3 阴影

第9章渐变和阴影

9.1 线性渐变

沿一条直接进行的渐变。

var gnt = cxt.createLinearGradient(x1, y1, x2, y2);
gnt.addColorStop(value1, color1);
gnt.addColorStop(value2, color2);
cxt.fillStyle = gnt;
cxt.fill(); //fillRect()或fillText()
1
2
3
4
5

图形渐变

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title> </title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            var gnt = cxt.createLinearGradient(0, 150, 200, 150);
            gnt.addColorStop(0, "HotPink");
            gnt.addColorStop(1, "white");
            cxt.fillStyle = gnt;
            cxt.fillRect(0, 0, 200, 150);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
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

文字渐变

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            var text = "绿叶学习网";
            cxt.font = "bold 50px 微软雅黑";

            var gnt = cxt.createLinearGradient(0, 75, 200, 75);
            gnt.addColorStop(0, "HotPink");
            gnt.addColorStop(1, "LightSkyBlue");

            cxt.fillStyle = gnt;
            cxt.fillText(text, 10, 90);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="270" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>
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

9.2 径向渐变

圆形或椭圆形渐变，颜色从一个起点向所有方向渐变。

var gnt = cxt.createRadialGradient(x1, y1, r1, x2, y2, r2);
gnt.addColorStop(value1, color1);
gnt.addColorStop(value2, color2);
cxt.fillStyle = gnt;
cxt.fill(); //fillRect()或fillText()
1
2
3
4
5

蛋黄渐变

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            //画圆
            cxt.beginPath();
            cxt.arc(80, 80, 50, 0, Math.PI * 2, true);
            cxt.closePath();
            //渐变
            var gnt = cxt.createRadialGradient(100, 60, 10, 80, 80, 50);
            gnt.addColorStop(0, "white");
            gnt.addColorStop(0.9, "orange");
            gnt.addColorStop(1, "rgba(0,0,0,0)");
            //填充
            cxt.fillStyle = gnt;
            cxt.fill();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>
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

多种颜色径向渐变

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            gradient = cxt.createRadialGradient(60, 60, 0, 60, 60, 60);
            gradient.addColorStop("0", "magenta");
            gradient.addColorStop("0.25", "blue");
            gradient.addColorStop("0.50", "green");
            gradient.addColorStop("0.75", "yellow");
            gradient.addColorStop("1.0", "HotPink");
            cxt.fillStyle = gradient;
            cxt.fillRect(0, 0, 120, 120);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
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

多种颜色径向渐变（动态图）

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            var i = 0;
            setInterval(function () {
                gradient = cxt.createRadialGradient(60, 60, 0, 60, 60, 60);
                gradient.addColorStop(i * 0, "magenta");
                gradient.addColorStop(i * 0.25, "blue");
                gradient.addColorStop(i * 0.50, "green");
                gradient.addColorStop(i * 0.75, "yellow");
                gradient.addColorStop(i * 1.0, "HotPink");
                cxt.fillStyle = gradient;

                i = i + 0.1;
                if (i >= 1) { //超过颜色点值后，自动归0
                    i = 0;
                }
                cxt.fillRect(0, 0, 120, 120);
            }, 50);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
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

9.3 阴影

阴影属性

属性	说明
shadowOffsetX	阴影与图形的水平偏移，默认0
shadowOffsetY	阴影与图形的垂直偏移，默认0
shadowColor	阴影颜色，默认黑色
shadowBlur	阴影模糊值，默认0。越大，模糊度越强。

图形阴影

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        //定义绘制图形的函数
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            //设置左上方向的阴影
            cxt.shadowOffsetX = -5;
            cxt.shadowOffsetY = -5;
            cxt.shadowColor = "LightSkyBlue";
            cxt.shadowBlur = 1;
            cxt.fillStyle = "HotPink";
            cxt.fillRect(30, 30, 50, 50);

            //设置右下方向的阴影
            cxt.shadowOffsetX = 5;
            cxt.shadowOffsetY = 5;
            cxt.shadowColor = "LightSkyBlue";
            cxt.shadowBlur = 10;
            cxt.fillStyle = "HotPink";
            cxt.fillRect(100, 30, 50, 50);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
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

文字阴影

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            //定义文字
            var text = "绿叶学习网";
            cxt.font = "bold 60px 微软雅黑";

            //定义阴影
            cxt.shadowOffsetX = 5;
            cxt.shadowOffsetY = 5;
            cxt.shadowColor = "LightSkyBlue";
            cxt.shadowBlur = 10;

            //填充文字
            cxt.fillStyle = "HotPink";
            cxt.fillText(text, 10, 90);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="320" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>
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

图片阴影

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            //创建image对象
            var image = new Image();
            image.src = "images/princess.png";

            image.onload = function () {
                //定义阴影
                cxt.shadowOffsetX = 5;
                cxt.shadowOffsetY = 5;
                cxt.shadowColor = "HotPink";
                cxt.shadowBlur = 10;
                //cxt.fillRect(40, 15, 120, 120);
                cxt.drawImage(image, 40, 15);
            }
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
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

4个方向的阴影效果

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            //创建image对象
            var image = new Image();
            image.src = "images/princess.png";

            image.onload = function () {
                //定义阴影
                //cxt.shadowOffsetX = 0;
                //cxt.shadowOffsetY = 0;
                cxt.shadowColor = "HotPink";
                cxt.shadowBlur = 10;
                //cxt.fillRect(40, 15, 120, 120);

                cxt.drawImage(image, 40, 15);
            }
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
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

相关阅读:
Azure Data Factory（六）数据集类型为Dataverse的Link测试
 ChatGPT Prompt方法原理详解
 【王道】计算机组成原理第三章存储系统(三)
K-hop消息传递图神经网络的表达能力有多强？
睿趣科技：未来抖音开网店还有前景吗
 SSM+中小型企业绩效管理系统毕业设计-附源码081536
5.0 Vue基础入门
 Dubbo初次使用（广播形式）
Salesforce-Visualforce-2.内置组件(components)
Linux驱动开发（十八）---网络（网卡）驱动学习
原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125362900

《canvas》之第9章 渐变与阴影

《canvas》之第9章 渐变与阴影

第9章 渐变和阴影

9.1 线性渐变

9.2 径向渐变

9.3 阴影

《canvas》之第9章渐变与阴影

《canvas》之第9章渐变与阴影

第9章渐变和阴影