用canvas绘制圆点虚线的函数

原创 2015年11月20日 16:50:55

实际项目中使用到了这个功能,想着做成一个函数方便日后调用,草草写就,纰漏不少,还是有待完善。目前只能绘制直线和折线。
关于下面那个Object.prototype.extend函数旨在获取一个新对象,不对原有对象进行改变,欢迎赐教。

// JavaScript source code
'use strict';
function dotLine(canvasId, options) {
    function DotLine(canvasId, options) {
        this.options = DotLine.Defaults.extend(options);
        this.Canvas = document.getElementById(canvasId);
        this.Drawer = this.Canvas.getContext('2d');
        this.Drawer.fillStyle = this.options.lineColor;
        this.pointX = this.options.constX;
        this.pointY = this.options.constY;
        this.turns = this.options.turns;

        var stepLength = this.options.stepLen;
        if (this.turns.length) {
            var moveX = stepLength * Math.cos(this.options.direction);
            var moveY = stepLength * Math.sin(this.options.direction);
            var stepNum = this.options.stepNum;
            this.Draw(false, true, moveX, moveY, stepNum);
            this.pointX += moveX * (stepNum - 1);
            this.pointY += moveY * (stepNum - 1);
            for (var turn = 0; turn < this.turns.length; turn++) {
                stepNum = this.turns[turn].stepNum;
                moveX = stepLength * Math.cos(this.turns[turn].direction);
                moveY = stepLength * Math.sin(this.turns[turn].direction);
                this.Draw(false, true, moveX, moveY, stepNum);
                this.pointX += moveX * (stepNum - 1);
                this.pointY += moveY * (stepNum - 1);
            }
        }
        else {
            var moveX = stepLength * Math.cos(this.options.direction);
            var moveY = stepLength * Math.sin(this.options.direction);
            var stepNum = this.options.stepNum;
            this.Draw(false, true, moveX, moveY, stepNum);
        }
    }

    DotLine.Defaults = {
        constX: 3,
        constY: 3,
        stepLen: 30,
        stepNum: 5,
        direction: Math.PI * 0,
        r: 3,
        lineColor: '#000',
        turns: [
            /*{
                stepNum: 0,
                direction: Math.PI * 3/2 // 0 <= direction < Math.PI*2
            }*/
        ]
    };

    DotLine.prototype.Draw = function (pathBegan, closeAfterDrawing, moveX, moveY, stepNum) {
        if (!pathBegan) {
            this.Drawer.beginPath();
        }
        for (var i = 0; i < stepNum; i++) {
            this.Drawer.arc(this.pointX + moveX * i, this.pointY + moveY * i, 3, 0, Math.PI * 2, true);
            this.Drawer.closePath();
            this.Drawer.fill();
            this.Drawer.beginPath();
            }
        if (closeAfterDrawing) {
            this.Drawer.closePath();
        }
    }
    var dotline = new DotLine(canvasId,options);
    return dotline;
}

Object.prototype.extend:

// JavaScript source code
'use strict';
Object.prototype.extend = function (objB) {
    if (typeof this === 'object' && typeof objB === 'object') {
        var destination = {};
        for (var attr in this) {
            destination[attr] = this[attr];
        }
        for (var attr in objB) {
            destination[attr] = objB[attr];
        }
        return destination;
    }
    else {
        var destination = {};
        for (var attr in this) {
            destination[attr] = this[attr];
        }
        return destination;
    }
}
版权声明:本文为博主原创文章,未经博主允许不得转载。

Canvas学习:绘制虚线和圆点线

上一节中,使用moveTo()、lineTo()和stroke()可以很轻易的在Canvas中绘制出实线(线段)。整篇文章中看到的都是绘制实现。不知道你和我是不是一样的好奇,那么要在Canvas中绘制...
  • wulixiaoxiao1
  • wulixiaoxiao1
  • 2017年03月18日 10:35
  • 724

HTML5的Canvas实现小圆点在屏幕内跑动

点击屏幕可以增加小圆点个数,效果如图: 完整代码如下,复制到HTML文件,打开即可运行。 Hover...
  • juhaotian
  • juhaotian
  • 2015年08月11日 17:15
  • 2066

QML画图-Canvas画基本图形

1.canvas画矩形   a.无路径画法     ctx.fillRect(200,100,50,40);    //填充     ctx.strokeRect(200,100,50,40);  /...
  • u012419303
  • u012419303
  • 2015年07月06日 10:47
  • 2980

安卓开发之使用DashPathEffect来绘制虚线

原理:主要用到了PathEffect的子类 DashPathEffect方法:给画笔Paint对象设置绘制路径时的特效:.setPathEffect效果:DashPathEffect 构造方法的参数决...
  • cxmscb
  • cxmscb
  • 2016年06月25日 22:35
  • 4879

HTML5 Canvas学习笔记之详解弧线的绘制

Canvas翻译过来呢就是画布 所以Canvas的作用就是把网页当成一张画布,在其中画画——说实话H5中最令我感兴趣的就是Canvas了。在html中引入canvas 当前浏览器不支持Can...
  • sinat_25127047
  • sinat_25127047
  • 2016年02月09日 10:54
  • 2405

Canvas学习:绘制虚线和圆点线

上一节中,使用moveTo()、lineTo()和stroke()可以很轻易的在Canvas中绘制出实线(线段)。整篇文章中看到的都是绘制实现。不知道你和我是不是一样的好奇,那么要在Canvas中绘制...
  • wulixiaoxiao1
  • wulixiaoxiao1
  • 2017年03月18日 10:35
  • 724

CANVAS绘制虚线和圆点虚线

绘制虚线 在MDN上,我查到一个叫CanvasRenderingContext2D.setLineDash()的API。官方介绍: CanvasRenderingContext2D.setLi...
  • sensyup
  • sensyup
  • 2017年08月09日 14:53
  • 88

canvas学习总结四:绘制虚线

上一章节我们说到,线性路径的绘制,主要利用movoTo(),lineTo()等方法,当然 Canvas 2D API 也提供了虚线的绘制方法,CanvasRenderingContext2D.setL...
  • qq_32135281
  • qq_32135281
  • 2017年06月29日 08:17
  • 290

【实例】html5-canvas中实现绘制虚线的方法

解决思路 我们使用类似moveTo加lineTo的方法绘制一段一段的线段moveTo的方法不需要改动,我们只要把lineTo的方法改成绘制虚线就好,这时我们就需要一个新的方法来绘制虚线新的方法需要...
  • u010513756
  • u010513756
  • 2015年08月12日 22:23
  • 6784

Android开发-----03-使用Canvas绘制虚线……

本章只关注绘制虚线,不关注Canvas的其它操作。 Android中,Canvas的功能都非常强大,一般情况下,用到了就去研究,用不到就懒得理会它。但是随着项目的需求不断增加,再怎么不想了解Canv...
  • fengbianyun
  • fengbianyun
  • 2014年10月30日 13:29
  • 3872
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用canvas绘制圆点虚线的函数
举报原因:
原因补充:

(最多只允许输入30个字)