如何在HTML5画布的线条中添加线帽-之路教程

设置线帽的语法

<script>

  context.lineCap = 'round/butt/square';

</script>

HTML5中的画布线帽

在HTML5中，canvas元素具有一些有趣的属性，这些属性决定了画布线条的形状，即“linecap”属性。
此属性的主要目的是将cap添加到画布线条。
在HTML5中，画布线条通常有三种类型的cap样式

Butt cap
Round cap
Square cap

如何在HTML5画布的线条中添加线帽

HTML5 Canvas设置线帽示例

<!DOCTYPE HTML>

<html>

  <head>

    <script>

        window.onload = function ()

        {

            var canvas = document.getElementById("caplineCanvas");

            var context = canvas.getContext("2d");

            //round line cap

            context.beginPath();

            context.moveTo(200, canvas.height/2);

            context.lineTo(canvas.width - 200, canvas.height/2);

            context.lineWidth = 30;

            context.strokeStyle = "#00ff00";

            context.lineCap = "round";

            context.stroke();

        };

 

    </script>

  </head>

  <body>

    <canvas id="caplineCanvas" width="600" height="200"></canvas>

  </body>

</html>

日期：2020-04-11 23:04:05 来源：oir作者：oir

←HTML5中的Hidden隐藏属性

如何在HTML5中定义Mathml字符→

设置线帽的语法

HTML5中的画布线帽

HTML5 Canvas设置线帽示例

目录