利用setLineDash 和 lineDashOffset 实现跑马灯（流动）效果

最新推荐文章于 2025-05-11 07:13:13 发布

转载最新推荐文章于 2025-05-11 07:13:13 发布 · 3.9k 阅读

地图专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种在HTML5 Canvas上实现跑马灯动画的方法。通过设置线段虚线样式和偏移量，实现了边界线随时间动态变化的效果。代码示例展示了如何使用JavaScript控制动画的更新。

原文出处： https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset

”跑马灯“效果是一种动画技巧，经常出现在计算机绘图程序的选项工具中。它能帮助用户根据图片背景动态变化的边界来区分选择的边界。

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([4, 2]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect(10,10, 100, 100);
}

function march() {
  offset++;
  if (offset > 16) {
    offset = 0;
  }
  draw();
  setTimeout(march, 20);
}

march();