canvas绘制渐变图形

作者: O糊涂范O | 来源:发表于2020-06-07 16:29 被阅读0次

canvas绘制渐变图形
HTML5Canvas
2019-10-08
Android canvas 基础图形详解
Android 自定义View(学习整理基础用法)
Canvas
canvas初探
Canvas
Canvas学习笔记--绘制矩形
2017-07-06

1.绘制线性渐变

Canvas提供了用于创建线性渐变的函数createLinearGradient（x0,y0,x1,y1）,坐标点（x0,y0）是起点，（x1,y1）是终点。

创建一个渐变色

var gradient=createLinearGradient(0,0,300,0);

定义渐变色颜色

ctx.addColorStop(stop,color);
ctx.addColorStop(0,"#f00");
ctx.addColorStop(1,"#00f");

设置Canvas内容的fillStyle为当前的渐变对象，并且绘制这个图形

ctx.fillStyle=gradient;         //设置fillStyle为当前的渐变对象
ctx.fillRect(0,0,400,300);      //绘制渐变图形

一个线性渐变的图形

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
   <canvas id="myCanvas"></canvas>

   <script type="text/javascript">
       var canvas=document.getElementById("myCanvas");
       if(canvas && canvas.getContext){
           var ctx=canvas.getContext("2d");
           var grad=ctx.createLinearGradient(0,0,300,0); //创建一个渐变色线性对象
           grad.addColorStop(0,"#f00");                  //定义渐变色颜色
           grad.addColorStop(1,"#00f");
           ctx.fillStyle=grad;                         //设置fillStyle为当前的渐变对象
           ctx.fillRect(0,0,300,100);                    //绘制渐变图形
       }
</script>
</body>
</html>

效果：

微信图片_20200605110144.png

2.绘制径向渐变

创建一个沿两个圆之间的锥面绘制渐变

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

一个径向渐变的图形


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<canvas id="myCanvas" width="400px" height="500px"></canvas>

<script type="text/javascript">
    var canvas=document.getElementById("myCanvas");
    if(canvas && canvas.getContext){
        var ctx=canvas.getContext("2d");
        var grad=ctx.createRadialGradient(200,200,50,200,200,200) //创建一个渐变色线性对象
        grad.addColorStop(0,"#f00");                  //定义渐变色颜色
        grad.addColorStop(1,"#00f");
        ctx.fillStyle=grad;                         //设置fillStyle为当前的渐变对象
        ctx.fillRect(0,0,400,400);                    //绘制渐变图形
    }
</script>
</body>
</html>

效果：

微信图片_20200605110647.png