返回列表 回复 发帖

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. }
复制代码
返回列表