美文网首页
HTML Canvas实现线性渐变效果

HTML Canvas实现线性渐变效果

作者: phpCN中文网 | 来源:发表于2019-10-21 09:24 被阅读0次

    可以先使用HTML Canvas的线性渐变的函数createLinearGradient()来创建一个渐变色线性对象;然后使用addColorStop()方法定义渐变色颜色;最后将渐变颜色分配给strokeStyle或fillStyle属性进行填充,使用fillRect()等方法来绘制“已填色”的形状,如矩形,圆形,线条,文本等。

    createLinearGradient() 方法创建线性的渐变对象,渐变可用于填充矩形,圆形,线条,文本等不同的颜色。

    JavaScript语法:

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

    参数值:

    ● x0:渐变开始点的 x 坐标

    ● y0:渐变开始点的 y 坐标

    ● x1:渐变结束点的 x 坐标

    ● y1:渐变结束点的 y 坐标

    addColorStop()方法规定渐变对象中的颜色和位置。

    JavaScript 语法:

    gradient.addColorStop(stop,color);

    参数值:

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

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

    示例1:

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta charset="UTF-8">

    </head>

    <body style="text-align:center;">

    <h2>线性渐变效果</h2>

    <canvas id="myCanvas" width="350" height="180"></canvas>

    <script>

    var a = document.getElementById("myCanvas");

    var gctx = a.getContext("2d");

    //创建一个渐变色线性对象

    var clg = gctx.createLinearGradient(100, 150, 200, 120);

    //定义渐变色颜色

    clg.addColorStop(0, "yellow");

    clg.addColorStop(1, "pink");

    gctx.fillStyle = clg; //设置用于填充绘画的颜色、渐变或模式

    gctx.fillRect(80, 20, 200, 110); //绘制渐变图形

    </script>

    </body>

    </html>

    效果图:

    示例2:

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta charset="UTF-8">

    </head>

    <body style="text-align:center;">

    <h2>线性渐变效果</h2>

    <canvas id="myCanvas" width="350" height="180"></canvas>

    <script>

    var a = document.getElementById("myCanvas");

    var gctx = a.getContext("2d");

    //创建一个渐变色线性对象

    var lingrad = gctx.createLinearGradient(0, 0, 0, 150);

    //定义渐变色颜色

    lingrad.addColorStop(0, '#00AB3B');

                            lingrad.addColorStop(0.5, '#45ec3f');

                            lingrad.addColorStop(0.5, '#66CC20');

                            lingrad.addColorStop(1, '#f3f');

    gctx.fillStyle = lingrad; //设置用于填充绘画的颜色、渐变或模式

    gctx.fillRect(110, 20, 130, 130);  //绘制渐变图形

    </script>

    </body>

    </html>

    效果图:

    以上就是本篇文章的详细内容,更多请关注php中文网其它相关文章!

    相关文章

      网友评论

          本文标题:HTML Canvas实现线性渐变效果

          本文链接:https://www.haomeiwen.com/subject/bwvzmctx.html