canvas学习线条属性之lineCap

最新推荐文章于 2024-04-10 16:05:41 发布

Limoaaa

最新推荐文章于 2024-04-10 16:05:41 发布

阅读量796

点赞数

分类专栏： html5

本文链接：https://blog.csdn.net/Limoaaa/article/details/51444878

版权

html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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();