调试易

确实，找了很久，CSS是可以，可是这两个搞在一起又比较麻烦，毕竟理念不同。
总不能我一小段画，一小段不画吧

当时找的一个C++的画虚线函数自己改的，这里面直接扩展了CanvasRenderingContext2D对象，也就是说你getContent('2d')返回的对象可以直接使用。var ctx = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
        if (ctx && ctx.lineTo){
            ctx.dottedLine = dottedLine;
        } else {
            window.dottedLine = dottedLine;
        }
        function dottedLine(x, y, x2, y2, dotArray, ctx){
            var context   = ctx || this,
                dashCount = dotArray.length,
                dx = (x2 - x), dy = (y2 - y),
                xSlope = dx > dy,
                slope = (xSlope) ? dy / dx : dx / dy;
            if(slope > 9999) {
                slope = 9999;
            }
            else if(slope < -9999) {
                slope = -9999;
            }
            var distRemaining = Math.sqrt(dx * dx + dy * dy);
            var dashIndex = 0, draw = true;
            while(distRemaining >= 0.1 && dashIndex < 10000) {
                var dashLength = dotArray[dashIndex++ % dashCount];
                if(dashLength === 0) {
                    dashLength = 0.001;
                }
                if(dashLength > distRemaining) {
                    dashLength = distRemaining;
                }
                var step = Math.sqrt(dashLength * dashLength / (1 + slope * slope));
                if(xSlope) {
                    x += dx < 0 && dy < 0 ? step * -1 : step;
                    y += dx < 0 && dy < 0 ? slope * step * -1 : slope * step;
                }
                else {
                    x += dx < 0 && dy < 0 ? slope * step * -1 : slope * step;
                    y += dx < 0 && dy < 0 ? step * -1 : step;
                }
                context[draw ? 'lineTo' : 'moveTo'](x, y);
                distRemaining -= dashLength;
                draw = !draw;
            }
            context.moveTo(x2, y2);
        }