绘制五角星的HTML代码不能生效

发布于 2020-11-07 21:41:46

我现在有一个绘制电子公章的代码,但是它无法绘制出红色五角星,请帮我看一下是哪里出了问题。还有请教我一下如何将这段代码中绘制五角星的代码写在绘制椭圆电子公章的代码中好吗?
(圆形公章)
<!DOCTYPE HTML>
<HEAD>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>圆形公章</title>
</HEAD>
<body>
    <BR>
    输入单位(14位,多了自己调):<input id="dw" width="50" type="text" value='某某某某某某某某某单位人事部'/>
    <br>
     输入单位(英文):<input id="edw" width="50" type="text" value='WTYRBCHFBBDHCBFVBDDD'/>
     <br>
    章下面文字:<input id="mdtext" width="50" type="text" value='专用章'/>
    <div id="sealdiv" >
        <canvas id="canvas" width="250" height="250"></canvas>
    </div>
    <input type="button" onclick="javascript:createSealEx();" value="生成中英公章"/>
    <input type="button" onclick="javascript:createSealEx2();" value="生成中公章"/>
</body>

<SCRIPT LANGUAGE="javascript">

function createSealEx(){
   var dw = document.getElementById("dw");
   var edw = document.getElementById("edw");
   var mdtext = document.getElementById("mdtext");  
   var tuzhangdiv = document.getElementById("tuzhangdiv"); 
   tuzhangdiv.innerHTML ="<canvas id='canvas' width='160' height='160'></canvas>";
   createSeal('canvas',dw.value,edw.value,mdtext.value);
   
   
}
function createSealEx2(){
   var dw = document.getElementById("dw");
   var edw = document.getElementById("edw");
   var mdtext = document.getElementById("mdtext");  
   var tuzhangdiv = document.getElementById("tuzhangdiv"); 
   tuzhangdiv.innerHTML ="<canvas id='canvas' width='160' height='160'></canvas>";
   createSeal11('canvas',dw.value,mdtext.value);
   
}

function createSeal11(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=2;
context.strokeStyle="#f00";
context.beginPath();
context.arc(width,height,78,0,Math.PI*2);
context.stroke();
context.save(); 

context.lineWidth=1;
context.strokeStyle="#f00";
context.beginPath();
context.arc(width,height,75,0,Math.PI*2);
context.stroke();
context.save(); 

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

// 绘制印章名称   
context.font = '18px Helvetica';
context.textBaseline = 'middle';//设置文本的垂直对齐方式
context.textAlign = 'center'; //设置文本的水平对对齐方式
context.lineWidth=1;
context.fillStyle = '#f00';
context.fillText(name,width,height+53);

// 绘制印章单位   
context.translate(width,height);// 平移到此位置,
context.font = '20px 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(64, 0);// 平移到此位置,此时字和x轴垂直   
    context.rotate(Math.PI/2);// 旋转90度,让字平行于x轴   
    context.fillText(c,0, 5);// 此点为字的中心点   
    context.restore();             
}

}

function createSeal(id,company,ecompany,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;
    //边框1
    context.lineWidth=2;
    context.strokeStyle="#f00";
    context.beginPath();
    context.arc(width,height,78,0,Math.PI*2);
    context.stroke();
    context.save(); 
    
    //边框2
    context.lineWidth=1;
    context.strokeStyle="#f00";
    context.beginPath();
    context.arc(width,height,63,0,Math.PI*2);
    context.stroke();
    context.save();


    //画五角星
    create5star(context,width,height,20,"#f00",0);
    
    // 绘制印章类型
    context.font = 'bolder 15px SimSun';
    context.textBaseline = 'middle';//设置文本的垂直对齐方式
    context.textAlign = 'center'; //设置文本的水平对对齐方式
    context.lineWidth=1;
    context.fillStyle = '#f00';
    context.fillText(name,width,height+50);
    
    
    // 绘制印章中文单位   
    context.translate(width,height);// 平移到此位置, 
    context.font = 'bolder 18px 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(); 
        // 平移到此位置,此时字和x轴垂直,第一个参数是与圆外边的距离,越大距离越近   
        context.translate(52, 0);
        context.rotate(Math.PI/2);// 旋转90度,让字平行于x轴   
        context.fillText(c,0, 5);// 此点为字的中心点   
        context.restore();             
    }
    //绘制印章英文单位
    context.translate(width-80,height-80);// 平移到此位置,
    context.font = 'bolder 10px SimSun';
    var ecount = ecompany.length;// 字数   
    var eangle = (5*Math.PI)/(3*(ecount));// 字间角度   
    var echars = ecompany.split("");   
    var ec;
    for (var j = 0; j < ecount; j++){
        ec = echars[j];// 需要绘制的字符   
        if(j==0)
            context.rotate(6*Math.PI/7-1);
        else
          context.rotate(eangle);
        context.save(); 
        // 平移到此位置,此时字和x轴垂直,第一个参数是与圆外边的距离,越大距离越近   
        context.translate(74, 0);
        context.rotate(Math.PI/2);// 旋转90度,让字平行于x轴   
        context.fillText(ec,0, 4.8);// 此点为字的中心点   
        context.restore();             
    }

}

//绘制五角星
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();  
}

</html>

(椭圆公章)
<!DOCTYPE html>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>椭圆</title>

</head>
<body>

    输入单位(支持最多14位,多了自己调):<input id="dw" width="50" type="text" value='测试印章椭圆科技有限公司公司'/>
    <br>
     输入单位(英文):<input id="edw" width="50" type="text" value='EASTPORTCOMPANY'/>
     <br>
    章下面文字:<input id="mdtext" width="50" type="text" value='公司章'/>

    <div id="sealdiv" >
        <canvas id="canvas" width="165" height="165"></canvas>
    </div>
    </div>
    <input type="button" onclick="javascript:createSealEx();" value="生成中文公章"/>
    <input type="button" onclick="javascript:createSealEx2();" value="生成中英公章"/>
    

<script>

function createSealEx(){
   var dw = document.getElementById("dw"); 
   var edw = document.getElementById("edw");
   var mdtext = document.getElementById("mdtext");  
   var sealdiv = document.getElementById("sealdiv"); 
   sealdiv.innerHTML ="<canvas id='canvas' width='165' height='165'></canvas>";
   createSeal2('canvas',dw.value,mdtext.value);
}
function createSealEx2(){
   var dw = document.getElementById("dw"); 
   var edw = document.getElementById("edw");
   var mdtext = document.getElementById("mdtext");  
   var sealdiv = document.getElementById("sealdiv"); 
   sealdiv.innerHTML ="<canvas id='canvas' width='165' height='165'></canvas>";
   createSeal1('canvas',dw.value,edw.value,mdtext.value);
}

function createSeal1(id,company,ecompany,name){
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.strokeStyle="red";//设置边框颜色
    context.textBaseline = 'middle';//设置文本的垂直对齐方式
    context.textAlign = 'center'; //设置文本的水平对对齐方式
    context.lineWidth = 2;//椭圆1宽度
    //3个参数: 左边距 上边据 宽度 椭圆扁度
    BezierEllipse4(context, 85, 79, 79, 55); //椭圆1
    context.lineWidth = 1;
    BezierEllipse4(context, 85, 79, 76, 52); //椭圆2
    context.lineWidth = 2;
    BezierEllipse4(context, 85, 79, 63, 39); //椭圆3
    // 绘制印章类型
    context.font = 'bolder 10px SimSun';//设置字体大小 样式
    context.fillStyle = 'red';//设置字体颜色
    context.fillText(name,canvas.width/2+3,canvas.height/2+25);    
    context.save(); //保存上述操作
    //绘制英文
    var circle={
        x:canvas.width/2,
        y:canvas.height/2,
        radius:58
    };
    var startAngle=220;//控制字符起始位置度数
    var endAngle =-40;//首位字符相隔度数
    var radius=circle.radius //圆的半径
    var angleDecrement=(startAngle-endAngle)/(ecompany.length-1)//每个字母占的弧度
    context.font="bolder 10px SimSun"
    context.lineWidth=1;//设置字体胖瘦
    var ratioX = 70 / circle.radius; //横轴缩放比率
    var ratioY = 45 / circle.radius; //纵轴缩放比率
    //进行缩放(均匀压缩) 重点
    context.scale(ratioX, ratioY);
    var index=0;
    for(var index=0;index<ecompany.length;index++){
        //保存之前的设置开始绘画
        context.save();
        context.beginPath();
        context.translate(circle.x+Math.cos((Math.PI/180)*startAngle)*radius-12,circle.y-Math.sin((Math.PI/180)*startAngle)*radius+19)//绘制点 +-微调
        context.rotate((Math.PI/2)-(Math.PI/180)*startAngle) ;  //Math.PI/2为旋转90度  Math.PI/180*X为旋转多少度
        context.fillText(ecompany.charAt(index),0,0);
        context.strokeText(ecompany.charAt(index),0,0);
        startAngle-=angleDecrement;
        context.restore();
    }
    
    //画五角星
    create5star(context,width,height,20,"#f00",0); 
    
    // 绘制印章类型
    context.font = 'bolder 14px SimSun';
    context.lineWidth=1;
    context.fillStyle = '#f00';
    context.fillText(company.substring(0,6),canvas.width/2-11,canvas.height/2+6);    
    context.save(); 
    context.font = 'bolder 14px SimSun';
    context.lineWidth=1;
    context.fillStyle = '#f00';
    context.fillText(company.substring(6,12),canvas.width/2-12,canvas.height/2+25);    
    context.save();
    context.font = 'bolder 14px SimSun';
    context.lineWidth=1;
    context.fillStyle = '#f00';
    context.fillText(company.substring(12,company.length),canvas.width/2-12,canvas.height/2+40);    
    context.save();

}
function createSeal2(id,company,name){
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    context.strokeStyle="red";//设置文本颜色
    context.textBaseline = 'middle';//设置文本的垂直对齐方式
    context.textAlign = 'center'; //设置文本的水平对对齐方式
    context.lineWidth = 2;//椭圆1宽度
    //3个参数: 左边距 上边据 宽度 椭圆扁度
    BezierEllipse4(context, 85, 79, 79, 55); //椭圆1
    context.lineWidth = 1;
    BezierEllipse4(context, 85, 79, 76, 52); //椭圆2
    
    // 绘制印章类型
    context.font = 'bolder 15px SimSun';
    context.lineWidth=1;
    context.fillStyle = '#f00';
    context.fillText(name,canvas.width/2+3,canvas.height/2+10);    
    context.save(); 

    //绘制中文
    var ccircle={
        x:canvas.width/2,
        y:canvas.height/2,
        radius:59
    };
    var cstartAngle=170;//控制字符起始位置度数
    var cendAngle =15;//首位字符相隔度数
    var cradius=ccircle.radius //圆的半径
    var cangleDecrement=(cstartAngle-cendAngle)/(company.length-1)//每个字母占的弧度
    context.font="12px SimSun"
    var cratioX = 66 / ccircle.radius; //横轴缩放比率
    var cratioY = 57 / ccircle.radius; //纵轴缩放比率
    //进行缩放(均匀压缩)
    context.scale(cratioX, cratioY);
    var cindex=0;
    for(var cindex=0;cindex<company.length;cindex++){
        context.save()
        context.beginPath()
        //绘制点
        context.translate(ccircle.x+Math.cos((Math.PI/180)*cstartAngle)*cradius-6,ccircle.y-Math.sin((Math.PI/180)*cstartAngle)*cradius+14)
        context.rotate((Math.PI/2)-(Math.PI/180)*cstartAngle)   //Math.PI/2为旋转90度  Math.PI/180*X为旋转多少度
        context.fillText(company.charAt(cindex),0,0)
        context.strokeText(company.charAt(cindex),0,0)
        cstartAngle-=cangleDecrement
        context.restore()
    }

}    
function BezierEllipse4(ctx, x, y, a, b){
    var k = .5522848,
    ox = a * k, // 水平控制点偏移量
    oy = b * k; // 垂直控制点偏移量</p> <p> 
    ctx.beginPath();
    //从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线
    ctx.moveTo(x - a, y);
    ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
    ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
    ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
    ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
    ctx.closePath();
    ctx.stroke();
};

    //绘制五角星  
    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();  
}

   

</script>
</body>
</html>

查看更多

关注者
0
被浏览
57
0 个回答
暂无答案,快来添加答案吧

撰写答案

请登录后再发布答案,点击登录

发布
问题

分享
好友

手机
浏览

扫码手机浏览