您现在的位置是:网站首页>>信息浏览 文章详情

解决canvas的fillText绘制文本时无法清空上次文本造成重叠的问题
2019-08-21 10:20 许多年以后 836

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

  1. /**
  2. * 绘制文本----动画版
  3. * 只需要将一段文本,每次绘制的长度多一点就可以达到动画的效果
  4. * canvas、ctx 不需要每次都重复获取,所以作为参数传入即可
  5. * text:每次绘制的文本
  6. */
  7. let fillText = function (canvas, ctx, text) {
  8. /** 这里通过为画布设置尺寸,则画布每次会先清除掉原来的像素,重新进行绘制*/
  9. canvas.width = $(canvas).parent().width();
  10. canvas.height = $(canvas).parent().height();
  11. /**
  12. * fillStyle:设置或返回用于填充绘画的颜色、渐变或模式
  13. * font:设置或返回画布上文本内容的当前字体属性,如下所示 字号 字体
  14. * @type {CanvasGradient}
  15. */
  16. ctx.font = "30px Verdana";
  17. ctx.fillStyle = "#fff";
  18. /**
  19. * 相对画布开始绘制文本的 X 坐标为 0,即从最左侧开始
  20. * 相对画布开始绘制文本的 Y 坐标为画布高度的一般,即从中间开始
  21. * 最后如果绘制的文本过长,又想它全部显示出来,则设置允许的最大文本宽度,以像素计,这里就是画布的宽度
  22. * 默认如果没有限制,则超过的文本内容,不会显示出来
  23. */
  24. ctx.fillText(text, 0, canvas.height / 2, canvas.width);
  25. }
  26. //开始方法
  27. $(function () {
  28. /**
  29. * 获取画布,同时为画布设置宽高等于父容器的宽高
  30. * 获取父容器尺寸这里用的是 JQuery 的方法获取,它获取的值是不带单位的
  31. * @type {Element}
  32. */
  33. let canvas = document.getElementById("myCanvas2");
  34. /**获取画布上下文环境*/
  35. let ctx = canvas.getContext("2d");
  36. let text = "2018 the Great Wall(万里长城)";
  37. let index = 1;
  38. /**
  39. * 使用定时器,每隔 50 毫秒就绘制一次文本
  40. * 每次绘制的文本都多一个字符
  41. */
  42. setInterval(function () {
  43. if (index <= text.length) {
  44. fillText2(canvas, ctx, text.substring(0, index++));
  45. } else {
  46. index = 1;
  47. }
  48. }, 50);
  49. });
赞 (120)
文章出处:书生个人博客          转载注明下哦!o(≧v≦)o~~

标签: canvas

相似文章:


随便说两句
请先登录
遵守国家法律法规,请勿回复无意义内容,请不要回复嵌套过多的楼层!