canvas绘制公章盖章效果代码-html代码-BFW代码库

canvas绘制公章盖章效果代码

代码语言：html

代码描述：canvas绘制公章盖章效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">


    <script>
    function toimg(){
        	   // document.getElementById('canvas').toDataURL("image/png");
      //  console.log( document.getElementById('canvas').toDataURL("image/png") );
        document.querySelector("img").src = document.getElementById('canvas').toDataURL("image/png");
        	}
        function createSealEx(){
        	   var dw = document.getElementById("dw");  
        	   var mdtext = document.getElementById("mdtext");  
        	   var tuzhangdiv = document.getElementById("tuzhangdiv"); 
        	   tuzhangdiv.innerHTML ="<canvas id='canvas' width='250' height='250'></canvas>";
        	   createSeal('canvas',dw.value,mdtext.value);
        	}
        	
           function createSeal(id,company,name){
            
            var canvas = document.getElementById(id); 
            
        	
            var context = canvas.getContext('2d');	
        	context.translate(0,0);//移动坐标原点 
        	
            // 绘制印章边框   
            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();
            context.save(); 
        	
            //画五角星
          create5star(context,width,height,30,"#f00",0);
        	
            // 绘制印章名称   
            context.font = 'bolder 24px SimSun';
            context.textBaseline = 'middle';//设置文本的垂直对齐方式
            context.textAlign = 'center'; //设置文本的水平对对齐方式
            context.lineWidth=1;
            context.fillStyle = '#f00';
            context.fillText(name,width,height+65);
        	
        	
            // 绘制印章单位   
            context.translate(width,height);// 平移到此位置,  
        	
           context.font = 'bolder 30px SimSun '
            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(95, 0);// 平移到此位置,此时字和x轴垂直，第一个参数是与圆外边的距离，越大距离越近   
                context.rotate(Math.PI/2);// 旋转90度,让字平行于x轴   
                context.fillText(c,0, 5);// 此点为字的中心点   
                context.restore();             
            }
        	
        			//绘制党徽获取其他的中心图像
        //	drowImageToCa.........完整代码请登录后点击上方下载按钮下载查看