HTML Canvas - lineDashOffset 屬性

上一個

下一個

Canvas API 的 HTML Canvas lineDashOffset 屬性可用於使用數字值中斷設定虛線樣式。

此屬性應在繪製線之前應用，它來自 CanvasRenderingContext2D 介面。

可能輸入的值

它接受浮點數，該浮點數指定虛線偏移的正確空間。預設值取為“0”。

示例

以下程式將 HTML Canvas lineDashOffset 屬性實現為 CanvasRenderingContext2D 介面上下文物件，以便可以繪製線模式。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="300" height="150" style="border: 1px solid black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      context.setLineDash([5, 16]);
      context.beginPath();
      context.lineWidth = 10;
      context.moveTo(0, 50);
      context.lineTo(300, 50);
      context.stroke();
      context.closePath();
      context.beginPath();
      context.strokeStyle = 'rgba(123,124,125,0.6)';
      context.lineWidth = 10;
      context.lineDashOffset = 5;
      context.moveTo(0, 100);
      context.lineTo(300, 100);
      context.stroke();
      context.closePath();
   </script>
</body>
</html>

輸出

根據畫素，以上程式碼在網頁上返回的輸出為 -

示例

以下程式使用 lineDashOffset 屬性來繪製線條的模式。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="350" height="200" style="border: 1px solid black;"></canvas>
   <script>
      function linestyles() {
         var canvas = document.getElementById("canvas");
         var ctx = canvas.getContext('2d');
         var offset = 0;
         function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.setLineDash([50, 10]);
            ctx.lineDashOffset = offset;
            ctx.strokeRect(10, 10, 250, 125);
         }
         function animate() {
            offset++;
            if (offset > 25) {
               offset = 0;
            }
            draw();
            setTimeout(animate, 50);
         }
         animate();
      }
      linestyles();
   </script>
</body>
</html>

輸出

根據畫素，以上程式碼在網頁上返回的輸出為 -

html_canvas_lines.htm

列印頁面

上一個

下一個