Board logo

标题: canvas绘制圆点线 [打印本页]

作者: MC-zhan    时间: 2017-8-4 14:25     标题: canvas绘制圆点线

绘制圆点线
  1. var canvasPrototype = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;

  2. canvasPrototype.dottedLine = function (x1,y1, x2, y2, interval) {

  3.     if (!interval) {
  4.         interval = 5;
  5.     }

  6.     var isHorizontal = true;

  7.     if (x1 == x2) {
  8.         isHorizontal = false;
  9.     }

  10.     var len = isHorizontal ? x2 - x1 : y2 - y1;

  11.     this.moveTo(x1, y1);

  12.     var progress = 0;

  13.     while (len > progress) {

  14.         progress += interval;

  15.         if (progress > len) {

  16.             progress = len;

  17.         }

  18.         if (isHorizontal) {

  19.             this.moveTo(x1 + progress, y1);

  20.             this.arc(x1 + progress, y1, 1, 0, Math.PI * 2, true);

  21.             this.fill();

  22.         } else {

  23.             this.moveTo(x1, y1 + progress);

  24.             this.arc(x1, y1 + progress, 1, 0, Math.PI * 2, true);

  25.             this.fill();

  26.         }

  27.      }

  28. }
复制代码





欢迎光临 关注前端这点事 (http://www.xinran001.com/bbs/) Powered by Discuz! 7.0.0