html5 canvas 使用总结

画图片，画动态矩形圆角框，画字体

//画图片
function drawOffDev(ctx,imgUrl,width,height){
    //ctx为var c=document.getElementById("myCanvas");
    //var ctx=c.getContext("2d");
    var img=new Image();
    let imgUrl = require('./images/img.png');//默认图片
    if(imgUrl==null){
         img.src=imgUrl;
    }
    ctx.beginPath();
    if(width==null||height==null)//x,y图片的坐标（0，0）
          ctx.drawImage(img,x,y);
    else ctx.drawImage(img,x,y,width,height);
    ctx.closePath();
}

//画动态圆角矩形
function dynamicLinkToRect(ctx,centerPoint,radius,heightArr){
　　 //heightArr 矩形宽的最低点坐标与最高点
    let centerBias=10;//圆角弧度
    //两边内边距30
    let padding=60;
    let padding1=38;
    //真实宽的半径
    let realRadius=radius
    let realHeight=heightArr[1]-heightArr[0];
    if(radius<0){
        realRadius=realRadius-padding;
        heightArr[0]=heightArr[0]-padding1;
        heightArr[1]=heightArr[1]+padding1;
    }else{
        realRadius=realRadius+padding;
        heightArr[0]=heightArr[0]-padding1;
        heightArr[1]=heightArr[1]+padding1;
    }
    ctx.beginPath();
    ctx.lineWidth=1;    //重新设置画笔
//    ctx.fillStyle="rgba(100,150,185,0.2)";
    ctx.fillStyle="rgba(29,29,88,0.2)";//设置背景色与透明度
//    ctx.globalAlpha=0.01;
    let angle1={ x:centerPoint.x-realRadius, y:heightArr[0]};
    let angle2={ x:centerPoint.x+realRadius, y:heightArr[0]};
    let angle3={ x:centerPoint.x-realRadius, y:heightArr[1]};
    let angle4={ x:centerPoint.x+realRadius, y:heightArr[1]};
    ctx.moveTo(angle1.x+centerBias,angle1.y);           // 创建开始点
    ctx.lineTo(angle2.x-centerBias,angle2.y);          // 创建水平线
    ctx.arcTo( angle2.x,angle2.y,angle4.x,angle4.y-centerBias,centerBias); // 创建弧
    ctx.lineTo(angle4.x,angle4.y-centerBias);         // 创建垂直线
    ctx.arcTo(angle4.x,angle4.y,angle4.x-centerBias,angle4.y,centerBias); // 创建弧
    ctx.lineTo(angle3.x+centerBias,angle3.y);         // 创建垂直线
    ctx.arcTo(angle3.x,angle3.y,angle3.x,angle3.y-centerBias,centerBias); // 创建弧
    ctx.lineTo(angle1.x,angle1.y+centerBias);    // 创建垂直线        
    ctx.arcTo(angle1.x,angle1.y,angle1.x+centerBias,angle1.y,centerBias); // 创建弧
    ctx.strokeStyle="#4B4A81";//#302F69,画笔边框的颜色
    ctx.stroke();  
    ctx.fill();
    ctx.closePath();
}
         

//画字体
function drawLabel(ctx,str,centerPoint){
        //centerPoint中心点 centerPoint={x:0,y:0};
    let label=src;
    //获取字体大概宽度
    let fontWidth=getFontWidth(label);
    ctx.beginPath();
       //设置字体颜色
    ctx.fillStyle="white";
       //ctx.fillStyle="red";
    ctx.fillText(label,centerPoint.x,centerPoint.y);
　　//ctx.font="9px Arial";设置字体大小，格式
　　ctx.closePath();
}

//获取字体的宽度
function getFontWidth(str){
    if(str!=null&&str.length!=0){
        let fontWidth=0
        let pattern = new RegExp("[\u4E00-\u9FA5]+");
        for(let i=0;i<str.length;i++){
            if(pattern.test(str)){//中文宽度给10，非中文给5
                fontWidth=fontWidth+10;
            }else{
                fontWidth=fontWidth+5;
            }
        }
        return fontWidth;
    }else return 30;//设置默认字体宽度
}

canvas属性说明：

1.stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

提示：请使用 strokeStyle 属性来绘制另一种颜色/渐变。

2.closePath() 方法创建从当前点到开始点的路径。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

提示：请使用 fill() 方法来填充图像（默认是黑色）。请使用 fillStyle 属性来填充另一个颜色/渐变。

3.font 属性设置或返回画布上文本内容的当前字体属性。

font 属性使用的语法与 CSS font 属性相同。

4.beginPath() 方法开始一条路径，或重置当前的路径。

提示：请使用这些方法来创建路径：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

5.moveTo把路径移动到画布中的指定点，不创建线条

6.lineTo() 方法添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。

提示：请使用 stroke() 方法在画布上绘制确切的路径。

 

16进制颜色与rbg转换：https://www.sioe.cn/yingyong/yanse-rgb-16/