用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绘制圆点虚线的函数

实际项目中使用到了这个功能,想着做成一个函数方便日后调用,草草写就,纰漏不少,还是有待完善。目前只能绘制直线和折线

canvas 绘制虚线

一.分析 原理是:求出AB点之间的长度,再设置虚线的长度dashLength,把AB是我长度/虚线长度dashLength 就是虚线数量,根据虚线数量,长度就可以得到当第i个虚线的坐标位置,在使用co...

精选:深入理解 Docker 内部原理及网络配置

网络绝对是任何系统的核心,对于容器而言也是如此。Docker 作为目前最火的轻量级容器技术,有很多令人称道的功能,如 Docker 的镜像管理。然而,Docker的网络一直以来都比较薄弱,所以我们有必要深入了解Docker的网络知识,以满足更高的网络需求。

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

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

CANVAS绘制圆弧

绘制矩形圆角: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24...

h5中使用canvas绘制线段、多边形、圆、圆弧

当浏览器不支持canvas

Canvas利用圆绘制正余弦函数叠加图像

前言昨天看傅里叶变换的资料,看到这篇文章:如果看了此文你还不懂傅里叶变换,就过来掐死我吧, 讲得很清晰,中间一幅图的美丽深深吸引了我。。。 于是萌生了利用Canvas把它画下来的想法。可是...

canvas学习总结四:绘制虚线

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

Canvas学习:绘制圆和圆弧

圆和圆弧是图形中基本图形之一,今天我们来了解在Canvas中怎么绘制圆和圆弧。在Canvas中绘制圆和圆弧其实和绘制线段和矩形一样的简单。在Canvas中,CanvasRenderingContext...

Canvas绘制曲线

转自:http://blessdyb.iteye.com/blog/1399090 2.游戏中的数学知识   在游戏的开发中,数学知识特别是其中的三角函数使用特别广泛 2.1...

CANVAS绘制线段

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 2...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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