用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中绘制...

Canvas绘制线段和圆

Canvas 默认 300px*150px Title var canvas = document.getElementById("canvas"...

CANVAS绘制虚线和圆点虚线

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

canvas学习总结四:绘制虚线

上一章节我们说到,线性路径的绘制,主要利用movoTo(),lineTo()等方法,当然 Canvas 2D API 也提供了虚线的绘制方法,CanvasRenderingContext2D.setL...

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

本章只关注绘制虚线,不关注Canvas的其它操作。 Android中,Canvas的功能都非常强大,一般情况下,用到了就去研究,用不到就懒得理会它。但是随着项目的需求不断增加,再怎么不想了解Canv...

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

解决思路 我们使用类似moveTo加lineTo的方法绘制一段一段的线段moveTo的方法不需要改动,我们只要把lineTo的方法改成绘制虚线就好,这时我们就需要一个新的方法来绘制虚线新的方法需要...

利用canvas实现分隔虚线(自定义view)

目前的app中,分隔线较为广泛使用,虚线的视觉效果又要优于实现,起始虚线的制作也很简单,只需要实现自定义view的基本步骤即可,本文只是侧重在画布canvas上实现虚线,所以省略了自定义view的st...

android canvas 编辑bitmap画虚线

效果图 布局文件:

Canvas---Canvas版画图、虚线、辅助线、线条颜色、线条宽度,整合加强版

使用Canvas实现画图程序。 本次更新主要实现了一下功能: 虚线实线的选择、辅助线、线条颜色选择、线条宽度选择 进一步整理了下代码,发现了不少很有用的写法,具体看下面。 ...

iOS之在drawRect通过Quartz 2D画虚线圆。 函数为CGContextSetLineDash

CGContextSetLineDash(, , , ) 参数解释: context : 上下文 phase :  第一个点绘制的时候,跳过多少点 lengths: 数组, 如果交...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用canvas绘制圆点虚线的函数
举报原因:
原因补充:

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