canvas基础—实现颜色渐变

最新推荐文章于 2024-08-14 00:51:11 发布

小龙Guo

最新推荐文章于 2024-08-14 00:51:11 发布

阅读量3.1k

点赞数 3

分类专栏： canvas基础颜色渐变文章标签： canvas javascript

本文链接：https://blog.csdn.net/Jacgu/article/details/106439180

版权

canvas基础同时被 2 个专栏收录

2 篇文章 1 订阅

订阅专栏

颜色渐变

1 篇文章 0 订阅

订阅专栏

本文介绍在HTML5 Canvas中实现颜色渐变的方法，包括线条渐变和径向渐变的创建及应用，通过实例展示了如何使用createLinearGradient和createRadialGradient函数，并添加多个颜色停止点以实现丰富的视觉效果。

摘要由CSDN通过智能技术生成

canvas基础—实现颜色渐变

1、在canvas中主要有两种渐变方式：线条渐变和径向/圆渐变。分别利用createLinearGradient(x,y,x1,y1)和createRadialGradient(x,y,r,x1,y1,r1)来创建。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变</title>
</head>
<body>
    <canvas id="canvas_jianbian" width="1000" height="500" style="box-shadow: 0px 0px 20px black;">
当前浏览器不支持canvas
    </canvas>
</body>
<script>
    var c=document.getElementById("canvas_jianbian");
    var ctx=c.getContext("2d");
    //创建一个线条渐变
    var jb=ctx.createLinearGradient(0,0,200,0);
    jb.addColorStop(0, 'blue');//参数为0<stop<1,color
    jb.addColorStop(1,"red");
    //填充渐变
    ctx.fillStyle=jb;
    ctx.fillRect(10,10,150,80);//参数依次为：x,y,width,height  
</script>
</html>

2、结果：

在这里插入图片描述

3、需要注意的是addColorStop()方法指定颜色停止，参数使用坐标来描述，是0至1，并且必须要使用两种或两种以上的颜色。下面添加多个颜色：

<script>
    var c=document.getElementById("canvas_jianbian");
    var ctx=c.getContext("2d");
    //创建一个线条渐变
    var jb=ctx.createLinearGradient(0,0,200,0);
    jb.addColorStop(0,"black");
    jb.addColorStop("0.3","magenta");
    jb.addColorStop("0.5","blue");
    jb.addColorStop("0.6","green");
    jb.addColorStop("0.8","yellow");
    jb.addColorStop(1,"red");
    //填充渐变
    ctx.fillStyle=jb;
    ctx.fillRect(10,10,150,100);//参数依次为：x,y,width,height  
</script>

在这里插入图片描述