canvas---绘制渐变矩形和字体

最新推荐文章于 2023-05-24 14:32:14 发布

maidu_xbd

最新推荐文章于 2023-05-24 14:32:14 发布

阅读量466

点赞数

分类专栏： HTML 文章标签： canvas渐变

本文链接：https://blog.csdn.net/maidu_xbd/article/details/90476044

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

渐变效果如下：

能量补充站：

ctx.strokeText(text,x,y,maxWidth);

在画布上绘制文本。文本的默认颜色是黑色。text:文本，（x,y）文本开始位置，maxWidth:允许的最大文本宽度。

使用 font 属性来定义字体和字号，并使用 strokeStyle 属性以另一种颜色/渐变来渲染文本。

ctx.fillText(text,x,y,maxWidth);

在画布上绘制“被填充的”文本

使用 font 属性来定义字体和字号，使用 fillStyle 属性以另一种颜色/渐变来渲染文本。

ctx.createLinearGradient(x0,y0,x1,y1);

创建线性的渐变对象,渐变可用于填充矩形、圆形、线条、文本等等。(x0,y0)渐变开始点坐标，（x1,y1）渐变结束点坐标

gradient.addColorStop(stop,color);

stop:介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。

color：在结束位置显示的 CSS 颜色值

ctx.createRadialGradient(x0,y0,r0,x1,y1,r1);

创建放射状/环形的渐变（用在画布内容上）

(x0,y0)渐变开始圆的圆心坐标，r0开始圆半径，（x1,y1）渐变结束圆的圆心坐标，r1结束圆半径

ctx.fillRect(x,y,width,height);

绘制“被填充”的矩形，默认黑色。(x,y)左上角坐标

ctx.fillStyle=”red”

设置填充颜色为红色

ctx.font="30px Verdana";

定义字体和字号

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>绘制渐变</title>

    <script>
        window.onload = function () {
            var cv = document.getElementById("cv");
            var ctx = cv.getContext('2d');

            // 绘制文本
            ctx.font = "18px Georgia";
            ctx.strokeText("绘制线性渐变的矩形!", 0, 18);
            ctx.fillText("绘制线性渐变的矩形!", 200, 18);

            // 绘制线性渐变的矩形
            var obj = ctx.createLinearGradient(30, 30, 80, 80);
            obj.addColorStop(0, 'red');
            obj.addColorStop(1, 'blue');
            ctx.fillStyle = obj;
            ctx.fillRect(30, 30, 50, 50);

            // 创建渐变的字体
            ctx.font = "25px Verdana";
            var gradient = ctx.createLinearGradient(100, 200, cv.width, 0);
            gradient.addColorStop("0", "magenta");
            gradient.addColorStop("0.5", "blue");
            gradient.addColorStop("1.0", "red");
            // 1.被填充的渐变字体
            ctx.fillStyle = gradient;
            ctx.fillText(" 绘制放射状/环形的渐变的矩形", 0, 120);
            // 2.未填充的渐变字体
            // ctx.strokeStyle = gradient;
            // ctx.strokeText(" 绘制放射状/环形的渐变的矩形", 0, 120);

            // 绘制放射状/环形的渐变的矩形
            var obj = ctx.createRadialGradient(120, 250, 50, 120, 250, 80)
            obj.addColorStop(0, 'red');
            obj.addColorStop(0.5, 'yellow');
            obj.addColorStop(0.8, 'pink');
            obj.addColorStop(1, 'blue');
            ctx.fillStyle = obj;
            ctx.fillRect(20, 150, 200, 200);

        }
    </script>
</head>

<body>
    <canvas id="cv" width="400px" height="400px" style="border:1px solid #333;">
        不支持canvas的浏览器
    </canvas>
</body>

</html>