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

深碍√TFBOYSˉ_ 2022-05-24 10:42 132阅读 0赞

原文出处： [https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset][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();

![70][]  
[（动画效果请见原文）][https_developer.mozilla.org_zh-CN_docs_Web_API_CanvasRenderingContext2D_lineDashOffset]

[https_developer.mozilla.org_zh-CN_docs_Web_API_CanvasRenderingContext2D_lineDashOffset]: https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/lineDashOffset
[70]: /images/20220524/d8f1931eb17c42e7b02473c975ea8fa2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，132人围观）

还没有评论，来说两句吧...

相关阅读

相关 HarmonyOS 实现跑马灯效果

`跑马灯效果实现效果图` ![20210728102605974.gif][] `注意事项: HarmonyOS里面Text由于multiple_lines默认为fals

野性酷女/ 2022年09月01日 13:47/ 0 赞/ 186 阅读

相关 TextView实现跑马灯效果

TextView实现跑马灯效果: <TextView android:id="@+id/cansaibiaoti"

蔚落/ 2022年08月20日 14:22/ 0 赞/ 249 阅读

相关 TextView实现跑马灯效果

下面是布局代码，需要注意的是设置singleLine属性、ellipsize属性、focusable属性和focusableInTouchMode属性 <TextVi

冷不防/ 2022年08月14日 05:40/ 0 赞/ 218 阅读

相关利用ScrollView实现跑马灯效果

本文部分代码来自http://blog.csdn.net/q229827701/article/details/39996171，在此基础上稍作修改，并添加了详细注释。 1

小咪咪/ 2022年08月14日 00:54/ 0 赞/ 253 阅读

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

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

深碍√TFBOYSˉ_/ 2022年05月24日 10:42/ 0 赞/ 133 阅读

相关 vue实现跑马灯效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

深碍√TFBOYSˉ_/ 2022年04月18日 06:23/ 0 赞/ 482 阅读

相关小程序实现跑马灯效果

跑马灯效果比较常见，一般做电商类的小程序都会使用到; ![在这里插入图片描述][20181112114423109.gif] 跑马灯效果的制作制作方式很简单，先方

素颜马尾好姑娘i/ 2022年04月17日 02:55/ 0 赞/ 516 阅读

相关 android实现跑马灯效果

第一步：新建一个新项目，MarqueeTextView 首先为了观察到跑马灯效果，将要显示的文字极可能写长。在strings.xml目录里面将 <string

超、凢脫俗/ 2021年10月23日 07:59/ 0 赞/ 417 阅读

相关 Marquee.js实现跑马灯效果

Marquee.js实现跑马灯效果 1、Marquee.js文件 / - Marquee.js - 参数： - ID：滚动对象（必须）

淩亂°似流年/ 2021年09月16日 05:36/ 0 赞/ 693 阅读

相关 canvas绘制跑马灯lineDashOffset、lineDashOffset

var canvas = document.getElementById('canvas'); canvas.width='300'; canv

墨蓝/ 2021年07月24日 21:09/ 0 赞/ 628 阅读