Canvas非零环绕填充&和线相关的属性和方法&虚线、渐变色矩形、折线图

最新推荐文章于 2021-07-28 20:18:59 发布

Amethyst紫宣

最新推荐文章于 2021-07-28 20:18:59 发布

阅读量244

点赞数 1

分类专栏： Canvas 文章标签： canvas

本文链接：https://blog.csdn.net/Amethystlry/article/details/109676928

版权

这篇博客详细介绍了Canvas的图形绘制技巧，包括如何遵循非零环绕规则进行填充，设置和使用线相关的属性和方法，绘制虚线，创建渐变色矩形，以及绘制复杂的折线图。

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

文章目录

/*
ctx.moveTo(100,100);
ctx.lineTo(200,100);
ctx.stroke();
ctx.strokeStyle="blueviolet";
ctx.lineWidth=10;
ctx.beginPath();
ctx.closePath();
ctx.fill();
ctx.fillStyle="lightskyblue";
ctx.lineCap="round";
ctx.lineJoin="round";
ctx.setLineDash([5,10,15]);
ctx.DashOffset=-20;//往前偏移
ctx.rect(100,100,200,100);
//绘制矩形，不是独立路径
ctx.strokeRect(100,100,200,100);
ctx.fillRect(100,100,200,100);
ctx.clearRect(100,100,200,100);

//渐变色
    var linearGradient=ctx.createLinearGradient(100,100,500,300);
    linearGradient.addColorStop(0,'lightskyblue');
    linearGradient.addColorStop(1,'blue');
*/

绘制平行线

    <style>
        canvas{
   
            border:1px solid blueviolet;
        }
    </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(200,100);

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

    //描边
    ctx.stroke();

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

在填充时遵循非零环绕规则

为0时填充白色
在这里插入图片描述

和线相关的属性和方法

    ctx.lineCap="butt";
    ctx.lineJoin="miter";

    ctx.lineCap="square";
    ctx.lineJoin="bevel";

    ctx.lineCap="round";
    ctx.lineJoin="round";

在这里插入图片描述

绘制虚线

<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([5,10,15]);

    //获取虚线的排列方式 获取的是不重复的那一段的排列方式
    console.log(ctx.getLineDash());

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

    ctx.stroke();
</script>

最低0.47元/天解锁文章

Amethyst紫宣

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Canvas非零环绕填充&和线相关的属性和方法&虚线、渐变色矩形、折线图

文章目录绘制平行线在填充时遵循非零环绕规则和线相关的属性和方法绘制虚线绘制一个渐变色矩形绘制折线图/*ctx.moveTo(100,100);ctx.lineTo(200,100);ctx.stroke();ctx.strokeStyle="blueviolet";ctx.lineWidth=10;ctx.beginPath();ctx.closeParh();ctx.fill();ctx.fillStyle="lightskyblue";ctx.lineCap="round";ct
复制链接

扫一扫

专栏目录