线条属性

最新推荐文章于 2021-06-01 08:56:26 发布

悟初境

最新推荐文章于 2021-06-01 08:56:26 发布

阅读量1.5k

点赞数 1

分类专栏： JavaScript 文章标签： canvas lineCap lineJoin miterLimit

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.lineCap

意思是线条的帽子，有butt（默认），square，round三种样式，接下来看一看效果：

代码为：

<body>
    <canvas id="canvas" width="800" height="600">no canvas</canvas>
    <script type="text/javascript">
        var canvas = document.getElementById("canvas");
        var cxt = canvas.getContext("2d");

        cxt.lineWidth = 30;
        cxt.strokeStyle = "#ccc";

        cxt.beginPath();
        cxt.lineTo(100,100);
        cxt.lineTo(300,100);
        cxt.lineCap = "butt";
        cxt.stroke();

        cxt.beginPath();
        cxt.lineTo(100,150);
        cxt.lineTo(300,150);
        cxt.lineCap = "round";
        cxt.stroke();

        cxt.beginPath();
        cxt.lineTo(100,200);
        cxt.lineTo(300,200);
        cxt.lineCap = "square";
        cxt.stroke();

        //画两竖线好区分
        cxt.beginPath();
        cxt.lineWidth = 2;
        cxt.strokeStyle = "#000";
        cxt.lineTo(100,80);
        cxt.lineTo(100,220);
        cxt.stroke();

        cxt.beginPath();
        cxt.lineTo(300,80);
        cxt.lineTo(300,220);
        cxt.stroke();
    </script>
</body>

注意：
此属性只能用于线段的开始和结尾，不能用在中间，用在中间也无效，比如：

        cxt.lineWidth = 30;
        cxt.strokeStyle = "#ccc";

        cxt.beginPath();
        cxt.lineTo(100,100);
        cxt.lineTo(300,100);
        cxt.lineTo(300,300);
        cxt.lineCap = "round";
        cxt.stroke();

2.lineJoin

意思是线条交汇处，有miter（默认），bevel，round三种样式：
我们画一个五角星来解释：
首先画一个五角星：

代码：

        cxt.lineWidth = 10;
        cxt.strokeStyle = "#000";

        drawStar(cxt,50,100,400,400,0);
        /*
        r,R:小圆和大圆半径
        x,y:中心坐标
        rot:旋转角度
        */
        function drawStar(cxt,r,R,x,y,rot){
            cxt.beginPath();
            for(var i=0;i<5;i++){
                cxt.lineTo(Math.cos((18 + i*72 - rot)/180*Math.PI)*R+x,-Math.sin((18+i*72-rot)/180*Math.PI)*R+y);
                cxt.lineTo(Math.cos((54 + i*72 - rot)/180*Math.PI)*r+x,-Math.sin((54+i*72-rot)/180*Math.PI)*r+y);
            }
            cxt.closePath();
            cxt.stroke();
        }