Em'

写博客的最大意义在于,将自己的愚蠢裱起来,供未来的自己参观。听起来这很蠢对吗?但这很重要。...

用canvas绘制圆点虚线的函数

实际项目中使用到了这个功能,想着做成一个函数方便日后调用,草草写就,纰漏不少,还是有待完善。目前只能绘制直线和折线。
关于下面那个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;
    }
}
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/saturn4711/article/details/49949015
文章标签: javascript canvas
个人分类: JavaScript
上一篇一个计算元素到窗口的边距的函数
下一篇检测移动设备方向的改变
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭