JavaScript和html5 canvas生成圓形印章

 

代碼：

function createSeal(id,company,name){
    
    var canvas = document.getElementById(id);  
    var context = canvas.getContext('2d');
    
    // 繪製印章邊框   
    var width=canvas.width/2;
    var height=canvas.height/2;
    context.lineWidth=7;
    context.strokeStyle="#f00";
    context.beginPath();
    context.arc(width,height,110,0,Math.PI*2);
    context.stroke();

    //畫五角星
    create5star(context,width,height,30,"#f00",0);

    // 繪製印章名稱   
    context.font = '22px Helvetica';
    context.textBaseline = 'middle';//設置文本的垂直對齊方式
    context.textAlign = 'center'; //設置文本的水平對對齊方式
    context.lineWidth=1;
    context.fillStyle = '#f00';
    context.fillText(name,width,height+65);

    // 繪製印章單位   
    context.translate(width,height);// 平移到此位置,
    context.font = '30px Helvetica'
    var count = company.length;// 字數   
    var angle = 4*Math.PI/(3*(count - 1));// 字間角度   
    var chars = company.split("");   
    var c;
    for (var i = 0; i < count; i++){
        c = chars[i];// 須要繪製的字符   
        if(i==0)
            context.rotate(5*Math.PI/6);
        else
          context.rotate(angle);
        context.save(); 
        context.translate(90, 0);// 平移到此位置,此時字和x軸垂直   
        context.rotate(Math.PI/2);// 旋轉90度,讓字平行於x軸   
        context.fillText(c,0, 5);// 此點爲字的中心點   
        context.restore();             
    }

    //繪製五角星  
    /** 
     * 建立一個五角星形狀. 該五角星的中心座標爲(sx,sy),中心到頂點的距離爲radius,rotate=0時一個頂點在對稱軸上 
     * rotate:繞對稱軸旋轉rotate弧度 
     */  
    function create5star(context,sx,sy,radius,color,rotato){
        context.save();  
        context.fillStyle=color;  
        context.translate(sx,sy);//移動座標原點  
        context.rotate(Math.PI+rotato);//旋轉  
        context.beginPath();//建立路徑  
        var x = Math.sin(0);  
        var y= Math.cos(0);  
        var dig = Math.PI/5 *4;  
        for(var i = 0;i< 5;i++){//畫五角星的五條邊  
         var x = Math.sin(i*dig);  
         var y = Math.cos(i*dig);  
         context.lineTo(x*radius,y*radius);  
        }   
        context.closePath();  
        context.stroke();  
        context.fill();  
        context.restore();  
    }
}

掛載元素：

<canvas id="canvas" width="250" height="250"></canvas>

調用：

createSeal('canvas','江西省晨尚科技有限公司','測試專用章');

效果：

獲取圖片Base64：

document.getElementById('canvas').toDataURL("image/png");

 若是須要用php保存到服務器上的話，能夠參考下面的代碼：

$str = $_POST['base64'];
preg_match('/^(data:\s*image\/(\w+);base64,)/', $str, $result);
$str = str_replace($result[1], '', $str);
file_put_contents('a.png',base64_decode($str));

 

核心的代碼網上找的，本身整理加工了一下而已。