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

mali378287007

已于 2023-12-13 14:31:28 修改

阅读量118

点赞数 1

分类专栏：整理 canvas 学习文章标签： canvas 前端

于 2022-06-26 18:30:00 首次发布

本文链接：https://blog.csdn.net/oqqyx1234567/article/details/125362900

版权

整理同时被 3 个专栏收录

181 篇文章 11 订阅

订阅专栏

学习

130 篇文章 4 订阅

订阅专栏

canvas

20 篇文章 6 订阅

订阅专栏

《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()

图形渐变

<!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>

文字渐变

<!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>

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()

蛋黄渐变

<!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>

多种颜色径向渐变

<!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>

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

<!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>

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>

文字阴影

<!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>

图片阴影

<!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>

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>