08Canvas——填充和渐变

最新推荐文章于 2022-11-19 22:06:42 发布

远近2021

最新推荐文章于 2022-11-19 22:06:42 发布

阅读量959

点赞数

分类专栏： # html5学习 htmlcss学习园地文章标签： html5

本文链接：https://blog.csdn.net/weixin_47197906/article/details/119577865

版权

htmlcss学习园地同时被 2 个专栏收录

91 篇文章 6 订阅

订阅专栏

html5学习

16 篇文章 2 订阅

订阅专栏

文章目录

1、填充
- `fillStyle` 属性
- fill() 方法
2、渐变
- 线性渐变
- 放射状/环形渐变

1、填充

`fillStyle` 属性

使用 fillStyle 属性，设置或返回用于填充绘画的颜色、渐变或模式。语法为：

ctx.fillStyle = color | gradient | pattern;

参数说明：

color 表示绘图填充的颜色。默认值是 #000000。
gradient 表示用于填充绘图的渐变对象（线性或放射性）。
pattern 表示用于填充绘图的 pattern 对象。

例子：
绘制实心矩形，填充颜色为红色。

<body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
        对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
        //获取canvas元素
        var myCanvas = document.getElementById('mycanvas');
        //获取Context上下文
        var ctx = myCanvas.getContext('2d');
        //填充为红色
        ctx.fillStyle = 'red';
        //绘制实心矩形
        ctx.fillRect(10, 10, 100, 200);
    </script>
</body>

在这里插入图片描述

fill() 方法

使用 fill() 方法填充当前的图像（路径）。默认颜色是黑色。填充另一种颜色/渐变使用 fillStyle 属性。
语法为：

ctx.fill();

注：如果路径未关闭，那么 fill() 方法会从路径结束点到开始点之间添加一条线，以关闭该路径，然后填充该路径。

<body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
        对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
        //获取canvas元素
        var myCanvas = document.getElementById('mycanvas');
        //获取Context上下文
        var ctx = myCanvas.getContext('2d');
        //填充为红色
        ctx.rect(20,20,150,100)
        ctx.fillStyle = 'red';
        //绘制实心矩形
        ctx.fill();
    </script>
</body>

在这里插入图片描述

2、渐变

线性渐变

使用 createLinearGradient() 方法创建线性渐变。语法为：

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

参数说明：

x0 表示渐变开始点的 x 坐标。
y0 表示渐变开始点的 y 坐标。
x1 表示渐变结束点的 x 坐标。
y1 表示渐变结束点的 y 坐标。

使用 addColorStop() 方法规定渐变对象中的颜色和停止位置。语法为：

gradient.addColorStop(stop, color);

参数说明：

stop 表示渐变中开始与结束之间的位置。是介于 0.0 与 1.0 之间的值。
color 表示在结束位置显示的 CSS 颜色值。
注：addColorStop() 方法与 createLinearGradient() 或 createRadialGradient() 一起使用。我们可以多次调用 addColorStop() 方法来改变渐变。如果我们不对 gradient 对象使用该方法，那么渐变将不可见。为了获得可见的渐变，至少需要创建一个色标。

<body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
        对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
        //获取canvas元素
        var myCanvas = document.getElementById('mycanvas');
        //获取Context上下文
        var ctx = myCanvas.getContext('2d');
        //设置渐变色
        var gradient = ctx.createLinearGradient(0,0,170,0)
        gradient.addColorStop(0,'red');
        gradient.addColorStop(0.2,'orange');
        gradient.addColorStop(0.5,'yellow');
        gradient.addColorStop(0.7,'green');
        gradient.addColorStop(1,'blue');
        //填充色为渐变色
        ctx.fillStyle = gradient;
        //绘制实心矩形
        ctx.fillRect(10, 10, 100, 200);
    </script>
</body>

在这里插入图片描述

放射状/环形渐变

使用 createRadialGradient() 方法创建放射状/环形的渐变。语法为：

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

参数说明：

x0 表示渐变的开始圆的 x 坐标。
y0 表示渐变的开始圆的 y 坐标。
r0 表示开始圆的半径。
x1 表示渐变的结束圆的 x 坐标。
y1 表示渐变的结束圆的 y 坐标。
r1 表示结束圆的半径。

<body>
    <!--添加canvas元素，设置画布的大小-->
    <canvas id="mycanvas" width="520px" height="1314px">
        对不起，你的浏览器不支持canvas
    </canvas>

    <script type="text/javascript">
        //获取canvas元素
        var myCanvas = document.getElementById('mycanvas');
        //获取Context上下文
        var ctx = myCanvas.getContext('2d');
        //设置渐变色
        var gradient = ctx.createRadialGradient(75,50,5,90,60,100);
        gradient.addColorStop(0,'red');
        gradient.addColorStop(0.2,'orange');
        gradient.addColorStop(0.5,'yellow');
        gradient.addColorStop(0.7,'green');
        gradient.addColorStop(1,'blue');
        //填充色为渐变色
        ctx.fillStyle = gradient;
        //绘制实心矩形
        ctx.fillRect(10, 10, 190, 160);
    </script>
</body>

在这里插入图片描述

远近2021

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
08Canvas——填充和渐变

文章目录1、填充`fillStyle` 属性fill() 方法2、渐变线性渐变放射状/环形渐变1、填充fillStyle 属性使用 fillStyle 属性，设置或返回用于填充绘画的颜色、渐变或模式。语法为：ctx.fillStyle = color | gradient | pattern;参数说明：color 表示绘图填充的颜色。默认值是 #000000。gradient 表示用于填充绘图的渐变对象（线性或放射性）。pattern 表示用于填充绘图的 pattern 对象。例子：
复制链接

扫一扫