11【canvas 1/2】canvas绘图+绘制平行线+三条不同颜色和宽度的平行线+一个填充的三角形+一个镂空正方形+绘制虚线+绘制一个从黑到白的渐变矩形+绘制点+矩形+网格+坐标系+折线图

最新推荐文章于 2023-05-24 18:09:09 发布

南北极之间

最新推荐文章于 2023-05-24 18:09:09 发布

阅读量1.3k

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/qq_22182989/article/details/89702561

版权

前端开发专栏收录该内容

567 篇文章 51 订阅

订阅专栏

01-体验canvas绘图.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            border: 1px solid #ccc;
            /*不建议在 样式设置尺寸*/
            /*width: 600px;
            height: 400px;*/
        }
    </style>
</head>
<body>
<!--1.准备画布-->
<!--1.1 画布是白色的 而且默认300*150-->
<!--1.2 设置画布的大小  width="600" height="400" -->
<canvas width="600" height="400" ></canvas>
<!--2.准备绘制工具-->
<!--3.利用工具绘图-->
<script>
    /*1.获取元素*/
    var myCanvas = document.querySelector('canvas');
    /*2.获取上下文 绘制工具箱 */
    /*是否有3d效果？ canvas暂时没有3d，有的话，也只是视觉效果*/
    var ctx = myCanvas.getContext('2d'); /*web gl 绘制3d效果的网页技术*/
    /*3.移动画笔*/
    ctx.moveTo(100,100);
    /*4.绘制直线 (轨迹，绘制路径)*/
    ctx.lineTo(200,100);
    /*5.描边*/
    ctx.stroke();
    /*如果不描边的话。就只是轨迹而已，看不见的*/
</script>
</body>
</html>

==============

想象无字天书。加水显示出来了。

============

02-绘制平行线.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*画平行线*/
    ctx.moveTo(100,100.5);
    ctx.lineTo(300,100.5);

    ctx.moveTo(100,200);
    ctx.lineTo(300,200);

    /*描边*/
    ctx.stroke();


    /*关于线条的问题*/
    /*1.默认的宽度是多少   1px*/
    /*2.默认的颜色是什么   黑色*/
    /*产生原因  对齐的点是线的中心位置  会把线分成两个0.5px 显示的是会不饱和增加宽度*/
    /*解决方案  前后移动0.5px */

</script>
</body>
</html>

===========

03-绘制三条不同颜色和宽度的平行线.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*画平行线*/
    ctx.beginPath();/*开启新路径*/
    /*蓝色  10px*/
    ctx.moveTo(100,100);
    ctx.lineTo(300,100);
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 10;
    /*描边*/
    ctx.stroke();


    /*红色 20px*/
    ctx.moveTo(100,200);
    ctx.lineTo(300,200);
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 20;
    /*描边*/
    ctx.stroke();


    /*绿色 30px*/
    ctx.moveTo(100,300);
    ctx.lineTo(300,300);
    ctx.strokeStyle = 'green';
    ctx.lineWidth = 30;
    /*描边*/
    ctx.stroke();


</script>
</body>
</html>

效果：都是绿色（前面的样式被后面的样式覆盖了）

解决办法：

开启新路径：可以解决样式覆盖问题

每个图形都添加一个：开启新路径

修改后的代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*画平行线*/
    ctx.beginPath();/*开启新路径*/
    /*蓝色  10px*/
    ctx.moveTo(100,100);
    ctx.lineTo(300,100);
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 10;
    /*描边*/
    ctx.stroke();

    ctx.beginPath();/*开启新路径*/
    /*红色 20px*/
    ctx.moveTo(100,200);
    ctx.lineTo(300,200);
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 20;
    /*描边*/
    ctx.stroke();

    ctx.beginPath();/*开启新路径*/
    /*绿色 30px*/
    ctx.moveTo(100,300);
    ctx.lineTo(300,300);
    ctx.strokeStyle = 'green';
    ctx.lineWidth = 30;
    /*描边*/
    ctx.stroke();


</script>
</body>
</html>

效果：

==================

04-绘制一个填充的三角形.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*1.绘制一个三角形*/
    ctx.moveTo(100,100);
    ctx.lineTo(200,100);
    ctx.lineTo(200,200);
    /*起始点和lineTo的结束点无法完全闭合缺角*/
    /*使用canvas的自动闭合 */
    //ctx.lineTo(100,100);
    /*关闭路径*/
    ctx.closePath();

    ctx.lineWidth = 10;
    /*2.描边*/
    ctx.stroke();
    /*3.填充*/
    //ctx.fill();

</script>
</body>
</html>

注意：/*起始点和lineTo的结束点无法完全闭合缺角*/

/*使用canvas的自动闭合 */

描边效果：

填充效果：

=================

05-绘制一个镂空正方形.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*1.绘制两个正方形 一大200一小100 套在一起*/
    ctx.moveTo(100,100);
    ctx.lineTo(300,100);
    ctx.lineTo(300,300);
    ctx.lineTo(100,300);
    ctx.closePath();

    ctx.moveTo(150,150);
    ctx.lineTo(150,250);
    ctx.lineTo(250,250);
    ctx.lineTo(250,150);
    ctx.closePath();

    /*2.去填充*/
    //ctx.stroke();
    ctx.fillStyle = 'red';
    ctx.fill();

    /*在填充的时候会遵循非零环绕规则*/
</script>
</body>
</html>

效果：

非零环绕规则：

参考：https://www.jianshu.com/p/f1590d4fb5c5

从里面拉一条线到外面，看是否会相交？

顺时针+1 逆时针-1

0不填充。非0就要填充

=================

一样的宽，带了帽子：

06-和线相关的属性和方法.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*画平行线*/
    ctx.beginPath();
    ctx.moveTo(100,100);
    ctx.lineTo(200,20);/*上面的点，变弯*/
    ctx.lineTo(300,100);
    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 10;
    ctx.lineCap = 'butt';
    ctx.lineJoin = 'miter';
    ctx.stroke();

    ctx.beginPath();
    ctx.moveTo(100,200);
    ctx.lineTo(200,120);
    ctx.lineTo(300,200);
    ctx.strokeStyle = 'red';
    ctx.lineWidth = 20;
    ctx.lineCap = 'square';
    ctx.lineJoin = 'bevel';
    ctx.stroke();


    ctx.beginPath();
    ctx.moveTo(100,300);
    ctx.lineTo(200,220);
    ctx.lineTo(300,300);
    ctx.strokeStyle = 'green';
    ctx.lineWidth = 30;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';
    ctx.stroke();


</script>
</body>
</html>

效果：尖角逐渐变圆角了

======================

07-绘制虚线.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*画线*/
    ctx.moveTo(100,100.5);
    ctx.lineTo(300,100.5);
    /*[5,10] 数组是用来描述你的排列方式的*/
    ctx.setLineDash([20]);
    /*获取虚线的排列方式 获取的是不重复的那一段的排列方式*/
    console.log(ctx.getLineDash());

    /*如果是正的值 往后偏移*/
    /*如果是负的值 往前偏移*/
    ctx.lineDashOffset = -20;

    ctx.stroke();

</script>
</body>
</html>

效果：

ctx.setLineDash([5,10,15])：效果：

ctx.setLineDash([ ]);

一个参数的时候：

ctx.setLineDash([20]);

2个参数时：表示虚线尺寸和虚线与虚线之间的间隔

ctx.setLineDash([5, 15]);

3个参数时：

ctx.setLineDash([5, 15, 25]);

setLineDash参数值是[5, 15, 25,5, 15, 25]的时候与是[5, 15, 25]时候运行效果完全相同。

===========

08-绘制一个从黑到白的渐变矩形.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*绘制一个矩形*/
    /*线是由点构成的*/
    /*ctx.moveTo(100,100);
    ctx.lineTo(355,100);
    ctx.lineWidth = 30;*/
    /*颜色的填充*/
    //ctx.strokeStyle = '#fff';
    /*黑到白的渐变颜色*/
   /* ctx.stroke();*/

    /*线是由点构成的*/
    ctx.lineWidth = 30;
    for (var i = 0; i < 255; i++) {
        ctx.beginPath();
        ctx.moveTo(100+i-1,100);
        ctx.lineTo(100+i,100);
        ctx.strokeStyle = 'rgb('+i+',0,0)';/*从黑到红*/
        //ctx.strokeStyle = 'rgb('+i+','+i+','+i+')';/*从黑到白*/
        ctx.stroke();
    }

</script>
</body>
</html>

效果：

ctx.strokeStyle = 'rgb('+i+',0,0)'从黑到红：

ctx.strokeStyle = 'rgb('+i+','+i+','+i+')'从黑到白：

===============

09-回顾上午的知识.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
getContext('2d');
moveTo(x,y);
lineTo(x,y);
stroke();
beginPath();
fill();
closePath();
setLineDash([]);
getLineDash();


strokeStyle
fillStyle
lineWidth
lineCap
lineJoin
lineDashOffset
-->
</body>
</html>

=================

10-绘制网格.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*1.绘制网格*/
    /*2.网格的大小*/
    var gridSize = 10;
    var canvasHeight = ctx.canvas.height;
    var canvasWidth = ctx.canvas.width;
    /*3.画多少条X轴方向的线 横线的条数  画布高度*/
    /*var canvasHeight = myCanvas.height;
    var canvasWidth = myCanvas.width;
    console.log(canvasHeight);
    console.log(canvasWidth);*/
    /*console.log(ctx.canvas.width);
    console.log(ctx.canvas.height);*/
    var xLineTotal = Math.floor(canvasHeight / gridSize);/*以免除不尽，Math.floor() 返回小于或等于一个给定数字的最大整数。*/
    for (var i = 0; i <= xLineTotal; i++) {
        ctx.beginPath();
        ctx.moveTo(0, i * gridSize - 0.5 );
        ctx.lineTo(canvasWidth, i * gridSize - 0.5);
        ctx.strokeStyle = '#eee';
        ctx.stroke();
    }
    /*4.画多少条Y轴方向的线*/
    var yLineTotal = Math.floor(canvasWidth / gridSize);
    for (var i = 0; i <= yLineTotal; i++) {
        ctx.beginPath();
        ctx.moveTo(i*gridSize - 0.5 ,0);
        ctx.lineTo(i*gridSize - 0.5 ,canvasHeight);
        ctx.strokeStyle = '#eee';
        ctx.stroke();
    }
    /*5.遍历的形式去画*/
</script>
</body>
</html>

效果：

取整参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/floor

==========================

11-绘制坐标系.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*1.绘制坐标系*/
    /*2.确定原点*/
    /*3.确定距离画布旁边的距离*/
    /*4.确定坐标轴的长度*/
    /*5.确定箭头的大小  是个等腰三角形  10 */
    /*6.绘制箭头填充*/

    var space = 20;
    var arrowSize = 10;

    /*计算原点*/
    var canvasWidth = ctx.canvas.width;
    var canvasHeight = ctx.canvas.height;

    var x0 = space;
    var y0 = canvasHeight - space;

    /*绘制x轴*/
    ctx.beginPath();
    ctx.moveTo(x0, y0);
    ctx.lineTo(canvasWidth - space, y0);
    /*箭头*/
    ctx.lineTo(canvasWidth - space - arrowSize, y0 + arrowSize / 2);
    ctx.lineTo(canvasWidth - space - arrowSize, y0 - arrowSize / 2);
    ctx.lineTo(canvasWidth - space, y0);
    ctx.fill();
    ctx.stroke();

    /*绘制y轴*/
    ctx.beginPath();
    ctx.moveTo(x0, y0);
    ctx.lineTo(space, space);
    /*箭头*/
    ctx.lineTo(space + arrowSize / 2, space + arrowSize);
    ctx.lineTo(space - arrowSize / 2, space + arrowSize);
    ctx.lineTo(space, space);
    ctx.fill();
    ctx.stroke();


</script>
</body>
</html>

效果：

============================

12-绘制点.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*1.绘制点*/
    /*2.点的尺寸*/
    /*3.以坐标中心绘制点*/

    /*点坐标*/
    var coordinate = {
        x:100,
        y:100
    }
    /*点尺寸*/
    var dottedSize = 10;

    ctx.moveTo(coordinate.x - dottedSize / 2,coordinate.y - dottedSize / 2);
    ctx.lineTo(coordinate.x + dottedSize / 2,coordinate.y - dottedSize / 2);
    ctx.lineTo(coordinate.x + dottedSize / 2,coordinate.y + dottedSize / 2);
    ctx.lineTo(coordinate.x - dottedSize / 2,coordinate.y + dottedSize / 2);
    ctx.closePath();
    ctx.fill();



</script>
</body>
</html>

效果：

============================

13-折线图.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    /*1.构造函数*/
    var LineChart = function (ctx) {
        /*获取绘图工具*/
        this.ctx = ctx || document.querySelector('canvas').getContext('2d');
        /*画布的大小*/
        this.canvasWidth = this.ctx.canvas.width;
        this.canvasHeight = this.ctx.canvas.height;
        /*网格的大小*/
        this.gridSize = 10;
        /*坐标系的间距*/
        this.space = 20;
        /*坐标原点*/
        this.x0 = this.space;
        this.y0 = this.canvasHeight - this.space;
        /*箭头的大小*/
        this.arrowSize = 10;
        /*绘制点*/
        this.dottedSize = 6;
        /*点的坐标 和数据有关系  数据可视化*/
    }
    /*2.行为方法*/
    LineChart.prototype.init = function (data) {
        this.drawGrid();
        this.drawAxis();
        this.drawDotted(data);
    };
    /*绘制网格*/
    LineChart.prototype.drawGrid = function () {
        /*x方向的线*/
        var xLineTotal = Math.floor(this.canvasHeight / this.gridSize);
        this.ctx.strokeStyle = '#eee';
        for (var i = 0; i <= xLineTotal; i++) {
            this.ctx.beginPath();
            this.ctx.moveTo(0, i * this.gridSize - 0.5);
            this.ctx.lineTo(this.canvasWidth, i * this.gridSize - 0.5);
            this.ctx.stroke();
        }
        /*y方向的线*/
        var yLineTotal = Math.floor(this.canvasWidth / this.gridSize);
        for (var i = 0; i <= yLineTotal; i++) {
            this.ctx.beginPath();
            this.ctx.moveTo(i * this.gridSize - 0.5, 0);
            this.ctx.lineTo(i * this.gridSize - 0.5, this.canvasHeight);
            this.ctx.stroke();
        }
    };
    /*绘制坐标系*/
    LineChart.prototype.drawAxis = function () {
        /*X轴*/
        this.ctx.beginPath();
        this.ctx.strokeStyle = '#000';
        this.ctx.moveTo(this.x0, this.y0);
        this.ctx.lineTo(this.canvasWidth - this.space, this.y0);
        this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 + this.arrowSize / 2);
        this.ctx.lineTo(this.canvasWidth - this.space - this.arrowSize, this.y0 - this.arrowSize / 2);
        this.ctx.lineTo(this.canvasWidth - this.space, this.y0);
        this.ctx.stroke();
        this.ctx.fill();
        /*Y轴*/
        this.ctx.beginPath();
        this.ctx.strokeStyle = '#000';
        this.ctx.moveTo(this.x0, this.y0);
        this.ctx.lineTo(this.space, this.space);
        this.ctx.lineTo(this.space + this.arrowSize / 2, this.space + this.arrowSize);
        this.ctx.lineTo(this.space - this.arrowSize / 2, this.space + this.arrowSize);
        this.ctx.lineTo(this.space, this.space);
        this.ctx.stroke();
        this.ctx.fill();
    };
    /*绘制所有点*/
    LineChart.prototype.drawDotted = function (data) {
        /*1.数据的坐标 需要转换 canvas坐标*/
        /*2.再进行点的绘制*/
        /*3.把线连起来*/
        var that = this;
        /*记录当前坐标*/
        var prevCanvasX = 0;
        var prevCanvasY = 0;
        data.forEach(function (item, i) {
            /* x = 原点的坐标 + 数据的坐标 */
            /* y = 原点的坐标 - 数据的坐标 */
            var canvasX = that.x0 + item.x;
            var canvasY = that.y0 - item.y;
            /*绘制点*/
            that.ctx.beginPath();
            that.ctx.moveTo(canvasX - that.dottedSize / 2, canvasY - that.dottedSize / 2);
            that.ctx.lineTo(canvasX + that.dottedSize / 2, canvasY - that.dottedSize / 2);
            that.ctx.lineTo(canvasX + that.dottedSize / 2, canvasY + that.dottedSize / 2);
            that.ctx.lineTo(canvasX - that.dottedSize / 2, canvasY + that.dottedSize / 2);
            that.ctx.closePath();
            that.ctx.fill();
            /*点的连线*/
            /*当时第一个点的时候 起点是 x0 y0*/
            /*当时不是第一个点的时候 起点是 上一个点*/
            if(i == 0){
                that.ctx.beginPath();
                that.ctx.moveTo(that.x0,that.y0);
                that.ctx.lineTo(canvasX,canvasY);
                that.ctx.stroke();
            }else{
                /*上一个点*/
                that.ctx.beginPath();
                that.ctx.moveTo(prevCanvasX,prevCanvasY);
                that.ctx.lineTo(canvasX,canvasY);
                that.ctx.stroke();
            }
            /*记录当前的坐标，下一次要用*/
            prevCanvasX = canvasX;
            prevCanvasY = canvasY;
        });
    };
    /*3.初始化*/
    var data = [
        {
            x: 100,
            y: 120
        },
        {
            x: 200,
            y: 160
        },
        {
            x: 300,
            y: 240
        },
        {
            x: 400,
            y: 120
        },
        {
            x: 500,
            y: 80
        }
    ];
    var lineChart = new LineChart();
    lineChart.init(data);
</script>
</body>
</html>

效果：

======================

=================

===============

14-绘制矩形.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*绘制矩形路径 不是独立路径*/
    /*ctx.rect(100,100,200,100);
    ctx.fillStyle = 'green';
    ctx.stroke();
    ctx.fill();*/

    /*绘制矩形  有自己的独立路径*/
    //ctx.strokeRect(100,100,200,100);
    ctx.fillRect(100,100,200,100);

    /*清除矩形的内容*/
    ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);

    //ctx.fillRect(100,100,200,100);

</script>
</body>
</html>

效果：

========================

15-绘制一个渐变颜色的矩形.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
/*        .linearGradient{
            width: 400px;
            height: 100px;
            background-image: linear-gradient(to right,pink,blue);
        }*/
    </style>
</head>
<body>
<div class="linearGradient"></div>
<canvas width="600" height="400"></canvas>
<script>
    var myCanvas = document.querySelector('canvas');
    var ctx = myCanvas.getContext('2d');

    /*fillStyle 'pink' '#000' 'rgb()' 'rgba()' */
    /*也可以使用一个渐变的方案了填充矩形*/
    /*创建一个渐变的方案*/
    /*渐变是由长度的*/
    /*x0y0 起始点 x1y1 结束点  确定长度和方向*/
    var linearGradient = ctx.createLinearGradient(100,100,500,400);
    linearGradient.addColorStop(0,'pink');
    //linearGradient.addColorStop(0.5,'red');
    linearGradient.addColorStop(1,'blue');

    ctx.fillStyle = linearGradient;

    ctx.fillRect(100,100,400,100);

    /*pink---->blue*/
    /*回想线性渐变---->要素 方向  起始颜色 结束颜色 */
    /*通过两个点的坐标可以控制 渐变方向*/
</script>
</body>
</html>

效果：

南北极之间

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
11【canvas 1/2】canvas绘图+绘制平行线+三条不同颜色和宽度的平行线+一个填充的三角形+一个镂空正方形+绘制虚线+绘制一个从黑到白的渐变矩形+绘制点+矩形+网格+坐标系+折线图

01-体验canvas绘图.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> canvas{ ...
复制链接

扫一扫