canvas

字体

that.ctx.fillStyle = selectVehIf?'#fff':"rgba(0, 0, 0, 1)";
that.ctx.fillText('文字',x,y)
this.canvas.oncontextmenu = e => false;//禁用右击保存图片

折线转为平滑曲线（点太密集，中间会断开）

 var Vector2 = function(x, y) {
        this.x = x;
        this.y = y;
    };
    Vector2.prototype = {
        "length": function () {
            return Math.sqrt(this.x * this.x + this.y * this.y);
        },
        "normalize": function () {
            var inv = 1 / this.length();
            return new Vector2(this.x * inv, this.y * inv);
        },
        "add": function (v) {
            return new Vector2(this.x + v.x, this.y + v.y);
        },
        "multiply": function (f) {
            return new Vector2(this.x * f, this.y * f);
        },
        "dot": function (v) {
            return this.x * v.x + this.y * v.y;
        },
        "angle": function (v) {
            return Math.acos(this.dot(v) / (this.length() *v.length())) * 180 / Math.PI;
        }
    };
    function getControlPoint(path) {
        var rt = 0.3;
        var i = 0, count = path.length - 2;
        var arr = [];
        for (; i < count; i++) {
            var a = path[i], b = path[i + 1], c = path[i + 2];
            var v1 = new Vector2(a.x - b.x, a.y - b.y);
            var v2 = new Vector2(c.x - b.x, c.y - b.y);
            var v1Len = v1.length(), v2Len = v2.length();
            var centerV = v1.normalize().add(v2.normalize()).normalize();
            var ncp1 = new Vector2(centerV.y, centerV.x * -1);
            var ncp2 = new Vector2(centerV.y * -1, centerV.x);
            if (ncp1.angle(v1) < 90) {
                var p1 = ncp1.multiply(v1Len * rt).add(b);
                var p2 = ncp2.multiply(v2Len * rt).add(b);
                arr.push(p1, p2)
            } else {
                var p1 = ncp1.multiply(v2Len * rt).add(b);
                var p2 = ncp2.multiply(v1Len * rt).add(b);
                arr.push(p2, p1)
            }
        }
        return arr;
    };
function drawPath(path,ctx,color){
        var point=getControlPoint(path);
        ctx.beginPath();
        ctx.lineWidth=1.6;
        ctx.strokeStyle=color;
        var int=0;
        for(var i =0;i<path.length;i++){
            if(i==0){
                ctx.moveTo(path[0].x,path[0].y);
                ctx.quadraticCurveTo(path[0].x,path[0].y,path[1].x,path[1].y);
                int=int+1;
            }else if(i<path.length-2){
                ctx.moveTo(path[i].x,path[i].y);
                ctx.bezierCurveTo(point[int].x,point[int].y,point[int+1].x,point[int+1].y,path[i+1].x,path[i+1].y);
                int+=2;
            }else if(i==path.length-2){
                ctx.moveTo(path[path.length-2].x,path[path.length-2].y);
                ctx.quadraticCurveTo(point[point.length-1].x,point[point.length-1].y,path[path.length-1].x,path[path.length-1].y);
            }
        }
        ctx.stroke();
        ctx.closePath();
        ctx.beginPath();
        // for(i =0;i<path.length;i++){
        //     ctx.beginPath();


        //     ctx.arc(path[i].x,path[i].y,1,0,2*Math.PI);
        //     ctx.fillStyle="blue";
        //     ctx.fill();
        //     ctx.closePath();
        // }
    }


调用：
drawPath([{x:20,y:30},{x:40,y:60},{x:100,y:200}],that.ctx,'rgba(0, 71, 255, 1)');

平滑曲线第二种方式

var cv = document.getElementById("myCanvas");
        var ctx = cv.getContext("2d");
        ctx.lineWidth = 2;
        ctx.strokeStyle = "blue";
function gradient(a, b) {
            return (b.y-a.y)/(b.x-a.x);
        }
function bzCurve(points, f, t) {
            //f = 0, will be straight line
            //t suppose to be 1, but changing the value can control the smoothness too
            if (typeof(f) == 'undefined') f = 0.3;
            if (typeof(t) == 'undefined') t = 0.6;
ctx.beginPath();
            ctx.moveTo(points[0].x, points[0].y);
var m = 0;
            var dx1 = 0;
            var dy1 = 0;
            var dx2 = 0;
            var dy2 = 0;
var preP = points[0];
            for (var i = 1; i < points.length; i++) {
                var curP = points[i];
                nexP = points[i + 1];
                if (nexP) {
                    m = gradient(preP, nexP);
                    dx2 = (nexP.x - curP.x) * -f;
                    dy2 = dx2 * m * t;
                } else {
                    dx2 = 0;
                    dy2 = 0;
                }
                ctx.bezierCurveTo(preP.x - dx1, preP.y - dy1, curP.x + dx2, curP.y + dy2, curP.x, curP.y);
                dx1 = dx2;
                dy1 = dy2;
                preP = curP;
            }
            ctx.stroke();
        }
        var lines=[];
        var X = 10;
        var t = 40; //to control width of X
        for (var i = 0; i < 100; i++ ) {
            Y = Math.floor((Math.random() * 300) + 50);
            p = { x: X, y: Y };
            lines.push(p);
            X = X + t;
        }
//draw straight line
        ctx.beginPath();
        ctx.setLineDash([5]);
        ctx.lineWidth = 1;
        bzCurve(lines, 0, 1);
// draw smooth line 建议取0，不取0.3
        ctx.setLineDash([0]);
        ctx.lineWidth = 2;
        ctx.strokeStyle = "blue";
        bzCurve(lines, 0.3, 1);

判断点击是否在路径内

drawShapePath2d({shape ='arc'}): Path2D{
    let path2d = new Path2D();
    return path2d;
}（给数据增加path2d字段）
this.ctx.isPointInPath(equipment.path2d, path2dXY[0], path2dXY[1]))//判断点击坐标是否在路径里  (面)
this.ctx.isPointInStroke(equipment.path2d, path2dXY[0], path2dXY[1]))//判断点击坐标是否在  (线)

画旋转的图形，旋转的其实是画布，需要将画布的原点平移到旋转点上去

that.ctx.save(); //必须
that.ctx.translate(item.baseInfo.originX +offset_x-that.centerPosition[0],  item.baseInfo.originY+offset_y-that.centerPosition[1])
 if(item.baseInfo.originTheta>0){
     that.ctx.rotate(item.baseInfo.originTheta);
   }else{
     that.ctx.rotate(item.baseInfo.originTheta);
  }
that.ctx.translate(-item.baseInfo.originX -offset_x+that.centerPosition[0],  -item.baseInfo.originY-offset_y+that.centerPosition[1]);
that.ctx.restore(); //必须