canvas学习线条属性之lineCap

最新推荐文章于 2025-05-10 06:57:26 发布

原创最新推荐文章于 2025-05-10 06:57:26 发布 · 845 阅读

0 ·

CC 4.0 BY-SA版权

html5 专栏收录该内容

6 篇文章

订阅专栏

本文通过HTML5 Canvas API演示了不同线条末端样式（butt、square、round）的应用，包括线条颜色、宽度等基本属性的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

lineCap：设置线条两端的形状

lineCap的属性值：butt（默认）、round、square。

    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");
    canvas.width=1024;
    canvas.height=768;

    context.strokeStyle="#cccccc";
    context.lineWidth=20;

    context.beginPath();
    context.moveTo(100,100);
    context.lineTo(400,100);
    context.lineCap="butt";    //默认
    context.stroke();

    context.beginPath();
    context.moveTo(100,150);
    context.lineTo(400,150);
    context.lineCap="square";   //两端方头
    context.stroke();

    context.beginPath();
    context.moveTo(100,200);
    context.lineTo(400,200);
    context.lineCap="round";    //两端圆头
    context.stroke();