canvas绘制直线，斜线

我是一只代码狗

已于 2024-01-01 15:10:30 修改

阅读量286

点赞数

分类专栏： vue 文章标签： javascript 前端开发语言

于 2024-01-01 09:56:54 首次发布

原文链接：https://mp.csdn.net/mp_blog/creation/editor?spm=1010.2135.3001.5352

版权

vue 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

创建html界面

画直线

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var canvas=document.createElement('canvas');
        canvas.width=600;
        canvas.height=400;
        document.body.append(canvas)
        var context=canvas.getContext('2d')
        //当x轴位置不同 ,y轴位置相同 那么构成的就是一条水平的直线
        //当x轴位置相同 ，y轴位置不同 那么构成的就是垂直的直线
        //当x y轴位置不相同 那么构成的就是斜线
        //绘制起点
        context.moveTo(100,100)
        //绘制终点
        context.lineTo(300,100)
        //两个点连成一条线
        context.stroke();


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

画折线

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //创建标签
        var canvas=document.createElement('canvas')
        canvas.width=600;
        canvas.height=400;
        //把canvas放入body中
        document.body.append(canvas);
        //创建画笔
        var context=canvas.getContext('2d');
        //设置起点 x,y
        context.moveTo(100,100)
        //设置移动的位置 可以多次移动 这样就构成了转折点
        //x,y轴坐标 向下移动
        context.lineTo(200,200);
        //在向上移动
        context.lineTo(300,100)
        //在向下移动
        context.lineTo(400,200);
        //连成线
        context.stroke();

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

给折线设置渐变颜色，并加粗

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //创建标签
        var canvas=document.createElement('canvas')
        canvas.width=600;
        canvas.height=400;
        //把canvas放入body中
        document.body.append(canvas);
        //创建画笔
        var context=canvas.getContext('2d');
        //设置渐变颜色 开始x,y轴 结束x,y轴
        var aa=context.createLinearGradient(100,100,400,200)
        //设置渐变的颜色0-1之间不同的颜色
        aa.addColorStop(0,'red')
        aa.addColorStop(0.25,'yellow')
        aa.addColorStop(0.5,'green')
        aa.addColorStop(1,'blue')

        //使颜色生效
        context.strokeStyle=aa;

        //设置线的宽度
        context.lineWidth=10;

        //设置折线
        //开始位置
        context.moveTo(100,100);
        //移动位置向下
        context.lineTo(200,200);
        //移动位置向上
        context.lineTo(300,100);
        //移动位置向下
        context.lineTo(400,200);
        //画线
        context.stroke();
        

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