解决canvas的fillText绘制文本时无法清空上次文本造成重叠的问题

我们知道fillText() 方法在canvas画布上绘制填色的文本，但是重新绘制几次时在有些游览器上（IE10）会造成重叠，就是无法清空上次绘制的文本。有人说用clearRect()方法，可是这个方法是清空矩形，而我们的文本是绘制再画布上的，是无法清空的。但我们可以通过为画布重新设置尺寸，则画布每次会先清除掉原来的像素，重新进行绘制。

    

  1.  /**
    2. 

  2.  * 绘制文本----动画版
    3. 

  3.  * 只需要将一段文本，每次绘制的长度多一点就可以达到动画的效果
    4. 

  4.  * canvas、ctx 不需要每次都重复获取，所以作为参数传入即可
    5. 

  5.  * text：每次绘制的文本
    6. 

  6.  */
    7. 

  7. let fillText = function (canvas, ctx, text) {
    8. 

  8.     /** 这里通过为画布设置尺寸，则画布每次会先清除掉原来的像素，重新进行绘制*/
    9. 

  9.     canvas.width = $(canvas).parent().width();
    10. 

  10.     canvas.height = $(canvas).parent().height();
    11. 

  11.     /**
    12. 

  12.      * fillStyle：设置或返回用于填充绘画的颜色、渐变或模式
    13. 

  13.      * font：设置或返回画布上文本内容的当前字体属性，如下所示 字号 字体
    14. 

  14.      * @type {CanvasGradient}
    15. 

  15.      */
    16. 

  16.     ctx.font = "30px Verdana";
    17. 

  17.     ctx.fillStyle = "#fff";
    18. 

  18.     /**
    19. 

  19.      * 相对画布开始绘制文本的 X 坐标为 0，即从最左侧开始
    20. 

  20.      * 相对画布开始绘制文本的 Y 坐标为画布高度的一般，即从中间开始
    21. 

  21.      * 最后如果绘制的文本过长，又想它全部显示出来，则设置允许的最大文本宽度，以像素计,这里就是画布的宽度
    22. 

  22.      * 默认如果没有限制，则超过的文本内容，不会显示出来
    23. 

  23.      */
    24. 

  24.     ctx.fillText(text, 0, canvas.height / 2, canvas.width);
    25. 

  25. }
    26. 

  26.  //开始方法
    27. 

  27.  $(function () {
    28. 

  28.     /**
    29. 

  29.      * 获取画布,同时为画布设置宽高等于父容器的宽高
    30. 

  30.      * 获取父容器尺寸这里用的是 JQuery 的方法获取，它获取的值是不带单位的
    31. 

  31.      * @type {Element}
    32. 

  32.      */
    33. 

  33.     let canvas = document.getElementById("myCanvas2");
    34. 

  34.     /**获取画布上下文环境*/
    35. 

  35.     let ctx = canvas.getContext("2d");
    36. 

  36.     let text = "2018 the Great Wall(万里长城)";
    37. 

  37.     let index = 1;
    38. 

  38.     /**
    39. 

  39.      * 使用定时器，每隔 50 毫秒就绘制一次文本
    40. 

  40.      * 每次绘制的文本都多一个字符
    41. 

  41.      */
    42. 

  42.     setInterval(function () {
    43. 

  43.         if (index <= text.length) {
    44. 

  44.             fillText2(canvas, ctx, text.substring(0, index++));
    45. 

  45.         } else {
    46. 

  46.             index = 1;
    47. 

  47.         }
    48. 

  48.     }, 50);
    49. 

  49. });
    50.

原创来源：滴一盘技术